"use strict";

var mapa;
var layerSwitcherSelected;
var layerSwitcherByTheme;
var legendPanel;
var infoPopup;
var WMSPopup;
var metaPopup;
var editingLayer;
var editingFeature;
var measureLayer;
var zoomPanel;
var externalServiceUrl;
var layerMetadata = null;
var switcherPanel;
var mapPanel;
var zoomSelector;
var metcapas;

OpenLayers.Layer.prototype.groupOfKeeper = "";
OpenLayers.Layer.prototype.groupOfTheme = "";

//Variables de Configuración de los servidores
var host = '';
var portHttp = '';
var portGeoserver = '';
var almacenDatos = '';
var nombrePortal = '';
var pathScripts = 'Scripts/Mapa/php/';

var infoPanel; 
var panelPrincipal;
var idTorre;
var win;

var buscar = '';
var buscarGrilla = '';
var buscarForm = '';


var storeTorres;
var grillaTorres;

var storeLectura;

//ID del Perfil del Usuario Autenticado
var idPerfil = '';
var usuario = '';
var cambiar_clave = '';

Ext.chart.Chart.CHART_URL = 'Content/charts.swf';
//Determina que Sub-Tramo ha sido seleccionado del Combo (relacionado con el gráfico de Planeado vs Ejecutado)
var consinmedidorseleccionado = '';

//Para la búsqueda de Torres por Etapas
var store;
var select = new GeoExt.grid.FeatureSelectionModel({autoPanMapOnSelection: true, layerFromStore: false});

var torre_layer = null;

var funciones = [];

var gidTorre = '';
var gTorre = '';

Ext.onReady(function () {
    Ext.QuickTips.init();
    
    //Cargar parámetros de configuración
    cargarParametros();
});

function cargarParametros()
{
    Ext.Ajax.request({
       url: pathScripts + 'get-parametros.php',
       //params :{ aplicacion : '1'},
       success: function(response, opts) {
            var parametro = Ext.decode(response.responseText);
            
            if (parametro.success)
            {
                //Obtenemos el Perfil y el Usuario
                host = parametro.data.nombre_host;
                portHttp = parametro.data.puerto_http;
                portGeoserver = parametro.data.puerto_geoserver;
                almacenDatos = parametro.data.almacen_datos;
                nombrePortal = parametro.data.nombre_portal;

                //Cargamos las capas seleccionadas por perfil
                cargarCapasBase();

                //Obtenemos los datos del perfil del usuario
                obtenerPerfil();

                //Verifica los permisos para acceder a las funciones.
                traerFuncionesPerfil();
            }
            else
                cerrarSesion();    
       },
       failure: function(response, opts) {
            //Salimos de la aplicación Web
            cerrarSesion();
       }
    }); 
}

//Función que obtiene el Perfil del Usuario autenticado.
function obtenerPerfil(){
    Ext.Ajax.request({
       url: pathScripts + 'get-perfil.php',
       success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            
            //Obtenemos el Perfil y el Usuario
            idPerfil = obj.perfil;
            usuario = obj.usuario;

            //Si cambiar es 1, Obligamos a que cambie su Clave
            cambiar_clave = obj.cambiar;

            if (cambiar_clave == '1')
            {
                //Debe cambiar su Clave
                Ext.Msg.show({
                   title:'Cambio de Clave',
                   msg: 'Debe cambiar su Clave de Acceso. Proceder?',
                   buttons: Ext.Msg.YESNO,
                   fn: function (btn, text) {
                        if (btn == 'yes')
                            //Mostramos la ventana de Cambio de Clave
                            cambiarClaveUsuario(true);
                        else
                        {
                            //Salimos de la aplicación Web
                           cerrarSesion();
                        }
                   },
                   animEl: 'elId',
                   icon: Ext.MessageBox.QUESTION
                });
            }
       },
       failure: function(response, opts) {
       }
    }); 
}

//Ejecuta el cierre de sesión del usuario autenticado.
function cerrarSesion()
{
    //Salimos de la aplicación Web
    Ext.Ajax.request({
       url: pathScripts + 'session.php',
       success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            
            var redirect = pathScripts + 'security/logout.php?signature=' + obj.data;
            window.location = redirect;
       },
       failure: function(response, opts) {
       }
    });
}

//Redefinimos la función Round para que tome los decimales.
Math.nativeRound = Math.round;
Math.round = function(i, iDecimals) {
    if (!iDecimals)
        return Math.nativeRound(i);
    else
       return Math.nativeRound(i * Math.pow(10, Math.abs(iDecimals))) / Math.pow(10, Math.abs(iDecimals));
};

//Verifica que el objeto haya sido instanciado o definido
function isdefined( variable)
{
    return (typeof(window[variable]) == "undefined")? false: true;
}

//Se leen de la Base de Datos las capas publicadas.
function cargarCapasBase() 
{ 
    //Dirección del Servicio WMS
    var wms = 'http://' + host + ':' + portGeoserver +'/geoserver/' + almacenDatos + '/wms';

    //Registro correspondiente a la Capa WMS
    var registro = Ext.data.Record.create([
            'cd_capa', 
            'es_publicada', 
            'nm_capa', 
            'nm_publicado', 
            'ds_formato', 
            'es_transparente',
            'es_capa_base',
            'es_visible', 
            'nm_grupo', 
            'url_metadata', 
            'ds_encuadre_publicado'      
        ]);

    //Traemos las capas publicadas y almacenadas en la Base de Datos
    var storeLayers = new Ext.data.Store({
        url: pathScripts + 'get-layers.php',
        reader : new Ext.data.JsonReader({ root : 'layer', idProperty : 'cd_capa' }, registro),
        autoLoad : true
    });

    var mylayers = new Array();
    var layer_wms;

    //Leemos la configuración de las capas de la BD y cargamos en el MAPA
    storeLayers.on('load', function () {
        storeLayers.data.each(function(item, index, totalItems ) 
        {
            //BOX(-54.6347122093879 -25.4978327814875,-54.6094899627275 -25.460386011058)
            var s_aux = item.data ['ds_encuadre_publicado'].replace('BOX(',''); ////-54.6347122093879 -25.4978327814875,-54.6094899627275 -25.460386011058)
            s_aux = s_aux.replace(')',''); //"-54.6347122093879 -25.4978327814875,-54.6094899627275 -25.460386011058"

            var s_aux2 = s_aux.split(','); //["-54.6347122093879 -25.4978327814875","-54.6094899627275 -25.460386011058"]

            var s_max_extent = new OpenLayers.Bounds(s_aux2[0].split(' ')[0] ,
                               s_aux2[0].split(' ')[1] , 
                               s_aux2[1].split(' ')[0] , 
                               s_aux2[1].split(' ')[1]); // ["-54.6347122093879", "-25.4978327814875","-54.6094899627275", "-25.460386011058"]

            layer_wms = new OpenLayers.Layer.WMS(item.data ['nm_capa'], wms, 
            {
                layers: almacenDatos + ':' + item.data ['nm_publicado'], 
				styles: item.data ['nm_publicado'],
                format: item.data ['ds_formato'], 
                tiled: true,
                transparent: (item.data ['es_transparente'].indexOf('false') == -1) ? true : false
            }, 
            {
                isBaseLayer: (item.data ['es_capa_base'].indexOf('false') == -1) ? true : false, 
                visibility: (item.data ['es_visible'].indexOf('false') == -1) ? true : false, 
                metadataURL: item.data['url_metadata'], 
                legendURL: wms + '?service=WMS&version=1.1.0&request=GetLegendGraphic&layer=' + almacenDatos + ':' + item.data ['nm_publicado'] + '&format=' + item.data ['ds_formato'],
                kmlURL: wms +'?service=WMS&version=1.1.0&request=GetMap&layers=' + almacenDatos + ':' + item.data ['nm_publicado'] + '&width=1024&height=768&bbox=-74,-34,-29,6&format=application/vnd.google-earth.kmz+xml',
                maxExtent: s_max_extent, 
                groupOfTheme: item.data ['nm_grupo']
            });


            mylayers.push(layer_wms);
        });

        //Creamos las capas en el mapa
        crearMapa(mylayers); 
    });
}

//Función que recibe las capas habilitadas en la Base de Datos para crear los objetos en el mapa.
function crearMapa(capas) {
    //Guardamos el listado de capas.
    metcapas = capas;
    //Seteamos el idioma a Español
    HS.setLang("es");
    //Dirección del Blind Proxy para hacer peticiones del Javascript al Geoserver
    OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

    //Agregamos las transformaciones soportadas.
    OpenLayers.Projection.addTransform("EPSG:4326", "EPSG:3857", OpenLayers.Layer.SphericalMercator.projectForward);
    OpenLayers.Projection.addTransform("EPSG:3857", "EPSG:4326", OpenLayers.Layer.SphericalMercator.projectInverse);
    OpenLayers.Projection.addTransform("EPSG:4326", "EPSG:900913", OpenLayers.Layer.SphericalMercator.projectForward);
    OpenLayers.Projection.addTransform("EPSG:900913", "EPSG:4326", OpenLayers.Layer.SphericalMercator.projectInverse);

    //Proyección principal del mapa.
    var projmap = new OpenLayers.Projection("EPSG:900913");
    //Objeto OpenLayers principal, el mapa sobre los que se cargan las otras capas.
    mapa = new OpenLayers.Map(
    { 
        controls: [], 
        units: "m", 
        projection: projmap, 
        displayProjection: new OpenLayers.Projection("EPSG:4326")
    });

    //Capa de Edición
    editingLayer = new OpenLayers.Layer.Vector("Diseños", 
    { 
        isBaseLayer: false, 
        displayInLayerSwitcher: false 
    });
    mapa.addLayer(editingLayer);

    //Capa para el cálculo de Distancia y Area
    measureLayer = new OpenLayers.Layer.Vector("Distancia y Área",
    { 
        isBaseLayer: false, 
        displayInLayerSwitcher: false 
    });
    mapa.addLayer(measureLayer);
     

    //editingLayer.events.on({ sketchcomplete: vectorFeatureEdited });

    //Sólo si hay conexión a Internet, se instancian las Capas de Google
    if (isdefined('google'))
    {
        var googleStreet = new OpenLayers.Layer.Google("Google Street", 
        { 
            sphericalMercator: true,
            numZoomLevels: 26,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        });

        var googlePhysycal = new OpenLayers.Layer.Google("Google Physycal",
        { 
            sphericalMercator: true,
            type: google.maps.MapTypeId.TERRAIN,
            numZoomLevels: 26,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        });

        var googleSatellite = new OpenLayers.Layer.Google("Google Satelite",
        { 
            sphericalMercator: true, 
            type: google.maps.MapTypeId.SATELLITE, 
            numZoomLevels: 26,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        });

        var googleHybrid = new OpenLayers.Layer.Google(
            "Google Hybrid",
            {
                type: google.maps.MapTypeId.HYBRID,
                sphericalMercator: true, 
                numZoomLevels: 26,
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) 
            }
        );

        //mapa.addLayer(googleSatellite);
        //mapa.addLayer(googleHybrid);
        mapa.addLayer(googleStreet);
        //mapa.addLayer(googlePhysycal);    
        //mapa.addLayer(new OpenLayers.Layer.OSM("OSM"));
    }

    //Colocamos visible las coordenadas del puntero en el mapa
    mapa.events.register('mousemove', mapa, function (e) 
    {
        var position = mapa.getLonLatFromViewPortPx(e.xy).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
        OpenLayers.Util.getElement("coord").innerHTML = "<label>Long.: " + Math.round(position.lon,4) + " E. </label>&nbsp;<label>Lat.: " + Math.round(position.lat,4) + " N. </label>";
    });

    if (capas != null) 
    {
        for (var i = 0; i < capas.length; i++) {
            capas[i].displayOutsideMaxExtent =true;
        }
        mapa.addLayers(capas); 
    }

    //Creamos los paneles que contendrán el mapa y las capas
    crearMapPanel();

    //Creamos el TabPanel con los tabs de Leyenda, Capas y Búsqueda
    crearPanelCapasLeyenda();

    //Creamos el área de gráfico de Seguimiento de Tareas
    crearAreaGrafico();
    
    //Ubicar la vista del mapa 
    posicionarMapa(mapa);

    //Seteamos los controles disponibles en el Toolbar
    setearControles(mapa); 

    //Mostramos el Usuario y el Perfil que tiene
    if (usuario !== '' && idPerfil !== '')
        OpenLayers.Util.getElement("usuario_perfil").innerHTML = "<label><b>Usuario: " + usuario + ". Perfil: " + idPerfil + " </label>";
    else
        cerrarSesion();

    //Actualizamos el control
    mapPanel.doLayout();

    //Verificamos el Perfil y los permisos suministrados
    verificarPerfilUsuario();
}

//Traemos las funciones habilitadas según el Perfil del Usuario autenticado.
function traerFuncionesPerfil()
{
    Ext.Ajax.request({
       url: pathScripts + 'get-funcionesPerfil.php',
       success: function(response, opts) {
            var jsonData = Ext.util.JSON.decode(response.responseText);

            for (var i = 0; i < jsonData.data.length; i++)
            {
                //Almacenamos las funciones
                funciones.push([jsonData.data[i].nombre_funcion]);
            }  
       },
       failure: function(response, opts) {
       }
    });
}

//Verifica que el Usuario tenga permisos para administrar los archivos relacionados a cada torre.
function verificarPermisoArchivosUsuario()
{
    var result = false;

    for (var i = 0; i < funciones.length; i++)
    {
        if (funciones[i] == "subir_bajar_archivos")
        {
            result = true;
            break;
        }
    }   

    return result;
}

//Habilitar las Funciones de la Aplicación según los permisos del Perfil del Usaurio
function verificarPerfilUsuario()
{
    //Para los Gráficos
    var bgrafico_proyectado_ejecutado = false;
    var bgrafico_avance_tareas = false;
    var _grafico_avance_tareas = Ext.getCmp('grafico_avance_tareas');
    var _grafico_proyectado_ejecutado = Ext.getCmp('grafico_proyectado_ejecutado');
    
    //Para los Tabs
    var btab_capas = false;
    var btab_leyendas = false; 
    var bbusqueda_por_id = false;
    var bbusqueda_por_tipo = false; 
    var bbusqueda_por_etapa = false;

    //Referenciamos los controles
    var _tab_panel = Ext.getCmp("layers-panel");
    var _tab_capas = Ext.getCmp('tab_capas');
    var _tab_leyendas = Ext.getCmp('tab_leyendas');
    var _busqueda_por_id = Ext.getCmp("busqueda_por_id");
    var _busqueda_por_tipo = Ext.getCmp("busqueda_por_tipo");
    var _busqueda_por_etapa = Ext.getCmp("busqueda_por_etapa");
    
    //Habilitamos según el perfil del usuario
    for (var i = 0; i < funciones.length; i++)
    {
        if (funciones[i] == "grafico_proyectado_ejecutado")
        {
            bgrafico_proyectado_ejecutado = true;
        }
        else if (funciones[i] == "grafico_avance_tareas")
        {
            bgrafico_avance_tareas = true;
        }
        else if (funciones[i] == "tab_capas")
        {
            btab_capas = true;
        }
        else if (funciones[i] == "tab_leyendas")
        {
            btab_leyendas = true;
        }
        else if (funciones[i] == "busqueda_por_id")
        {
            bbusqueda_por_id = true;
        }
        else if (funciones[i] == "busqueda_por_tipo")
        {
            bbusqueda_por_tipo = true;
        }
        else if (funciones[i] == "busqueda_por_etapa")
        {
            bbusqueda_por_etapa = true;
        }
    }   
    
    //Para el Gráfico de Avance de Tareas
    if (_grafico_avance_tareas)
    {
        if (bgrafico_avance_tareas)
            _grafico_avance_tareas.setVisible(true);
        else
            _grafico_avance_tareas.setVisible(false);
    }

    //Gráfico de Diagnóstico
    if (_grafico_proyectado_ejecutado)
    {
        if (bgrafico_proyectado_ejecutado)
            _grafico_proyectado_ejecutado.setVisible(true);
        else
            _grafico_proyectado_ejecutado.setVisible(false);
    }

    //Tabs con funcionalidades
    if (_tab_panel) 
    {

        if (btab_capas)
            _tab_panel.unhideTabStripItem(_tab_capas);
        else
            _tab_panel.hideTabStripItem(_tab_capas);

        if (btab_leyendas)
            _tab_panel.unhideTabStripItem(_tab_leyendas);
        else
            _tab_panel.hideTabStripItem(_tab_leyendas);

        if (bbusqueda_por_id)
            _tab_panel.unhideTabStripItem(_busqueda_por_id);
        else
            _tab_panel.hideTabStripItem(_busqueda_por_id);
    
        if (bbusqueda_por_tipo)
            _tab_panel.unhideTabStripItem(_busqueda_por_tipo);
        else
            _tab_panel.hideTabStripItem(_busqueda_por_tipo);
   
        if (bbusqueda_por_etapa)
            _tab_panel.unhideTabStripItem(_busqueda_por_etapa);
        else
            _tab_panel.hideTabStripItem(_busqueda_por_etapa);
    
        _tab_panel.setActiveTab(0);
        _tab_panel.doLayout();
    }
    //Fin Para los Gráficos
}
    
//Actualiza la sección de Gráficos de Diagnóstico. [No utilizado]
function actualizarGraficos(container)
{
    var etapa = container.title;

    var idEtapa = etapa == 'Hormigonado' ? 1 : etapa == 'Montaje' ? 2 : 3;

    var tabGrafico;

    var data = [];  
    var data1 = []; 
    var data2 = [];

    var titulo = consinmedidorseleccionado == '' || consinmedidorseleccionado == '0' ? '(General)' : '(Sub-Tramo ' + consinmedidorseleccionado + ')';

    Ext.Ajax.request({
        url : pathScripts + 'listadoPlanificadoEjecutado.php',
        method: 'POST',
        params :{ etapa : idEtapa, subtramo: consinmedidorseleccionado },
        success: function ( result, request ) {
            var jsonData = Ext.util.JSON.decode(result.responseText);
        
            for (var i = 0; i < jsonData.planificado.length; i++)
            {
                data1.push([Date.parse(jsonData.planificado[i].periodo), parseFloat(jsonData.planificado[i].total_sub_tramo)]);
            }
            
            for (var i = 0; i < jsonData.ejecutado.length; i++)
            {
                data2.push([Date.parse(jsonData.ejecutado[i].periodo), parseFloat(jsonData.ejecutado[i].cantidad_acumulada)]);
            }
            
            data = [{label: "Proyectado " + titulo, data: data1 } , 
                    {label: "Ejecutado " + titulo, data: data2 }];


            tabGrafico = new Ext.ux.Flot(
            {
                autoHeight: true,
                height: 150,
                cls: 'x-panel-body',
                lines: {
                    show: true,
                    lineWidth: 2
                },
                points: { show: true },
                legend: {
                show: true, 
                position: "nw", 
                backgroundOpacity: 0
                },
                colors: ["#2E64FE", "#B18904"],
                xaxis: {
                    mode: 'time',
                    timeformat: "%y-%m" 
                  },
                tooltip: function(o) {
                    if (!this.tipTemplate) { 
                        this.tipTemplate = new Ext.XTemplate('<div id="{tipId}">({date}, {1})</div>'); 
                    }
                    o.date = Ext.util.Format.date(new Date(o.datapointX), 'Y-m');
                    return this.tipTemplate.apply(o);
                  },
                yaxis: { mode: null },
                series: data
            });

            container.removeAll(true);
            container.add(tabGrafico);
            container.doLayout();
        },
        failure: function ( result, request ) {
            var jsonData = Ext.util.JSON.decode(result.responseText);
            var resultMessage = jsonData.data.result;
            
            Ext.Msg.alert(resultMessage);
        }
    });  
}

//Crea el control de Gráfico de Diagnóstico. [No utilizado]
function crearAreaGraficoDiagnostico() 
{
  
    var tabPanelGraficos = new Ext.TabPanel(
    {
        id: 'tabGraficos',
        border: false,
        activeTab: 0,
        enableTabScroll:true,
        autoScroll: true,
        //defaults: { layout: 'fit', border: false },
        items: [
            {
                id: 'subtramo-c1',
                title: 'Hormigonado',
                autoScroll: true,
                listeners: { activate: actualizarGraficos }
            },
            {
                id: 'subtramo-c2',
                title: 'Montaje',
                autoScroll: true,
                listeners: { activate: actualizarGraficos }
            },
            {
                id: 'subtramo-c3',
                title: 'Tendido',
                autoScroll: true,
                listeners: { activate: actualizarGraficos }
            }
        ]
    });

    var chartPanel2 = Ext.getCmp('grafico_proyectado_ejecutado');

    chartPanel2.add(tabPanelGraficos);
    //chartPanel2.doLayout();    
}

//Función que genera el gráfico de Seguimiento de Tareas y asigna al control Canvas
function dibujarGraficoSeguimiento(data1){
    var canv = document.createElement('canvas');
    canv.setAttribute('width', 450);
    canv.setAttribute('height',170);
    canv.setAttribute('style', 'cursor: default;');

    canv.setAttribute('id','canvas');

    var cuerpo = '';

    if (cambiar_clave == '1')
        //cuerpo = document.getElementById('ext-gen126');
            cuerpo = document.getElementById('ext-gen122');
    else
        //cuerpo = document.getElementById('ext-gen91');
        cuerpo = document.getElementById('ext-gen87');

    cuerpo.appendChild(canv);

    var hbar = new RGraph.HBar('canvas', data1);
    hbar.Set('chart.grouping', 'stacked');
    hbar.Set('chart.labels.above', false);

    hbar.Set('chart.vmargin', 20);
    hbar.Set('chart.labels', ['C1','C2','C3','C4','C5', 'C6']);
    hbar.Set('chart.text.size', 7);
    hbar.Set('chart.key', ['Tendido','Montaje','Hormigonado']);
    hbar.Set('chart.key.position', 'gutter');
    hbar.Set('chart.gutter.top', 18);
    hbar.Set('chart.gutter.left', 30);
    hbar.Set('chart.key.position.gutter.boxed', true);           
    hbar.Set('chart.key.colors', ['#73b52a','#6bc2cf','#9d211b']);
    hbar.Set('chart.colors', ['#73b52a','#6bc2cf','#9d211b']);
    hbar.Set('chart.tooltips.event', 'onmousemove');
    hbar.Set('chart.tooltips', [
                               'Tendido','Montaje','Hormigonado',
                               'Tendido','Montaje','Hormigonado',
                               'Tendido','Montaje','Hormigonado',
                               'Tendido','Montaje','Hormigonado',
                               'Tendido','Montaje','Hormigonado',
                               'Tendido','Montaje','Hormigonado'
                              ]);
   
   //Para que se vean los porcentajes
   hbar.ondraw = function (obj)
    {
        var f=0;
        var c=0;

        for (var i=0; i<obj.coords.length; ++i) 
        {
            obj.context.fillStyle = 'white';
            RGraph.Text(obj.context, 
                        'Verdana', 
                        7, 
                        obj.coords[i][0] + (obj.coords[i][2] / 2) + 20, 
                        obj.coords[i][1] + (obj.coords[i][3] / 2),
                        (obj.data[f][c].toString() !== '0' ? obj.data[f][c].toString() + '%' : ''),
                        'center', 
                        'right', 
                        null,
                        null,
                        null,
                        true);

            if (c == 2) c = 0; else c = c + 1;

            if (i % 3 == 0 && i !== 0)
                f = f + 1;
        }
    }
   
   hbar.Draw();
}

//Función que toma de la Base de Datos el avance de las tareas de Hormigonado, Montaje y Tendido
function crearAreaGrafico() 
{
    /*var fechaActualizacion = '';
    var data1 = [];
    var canvasPanel = null;
    
    //SE leen los datos
    var storeSeguimiento = new Ext.data.JsonStore({
        url: pathScripts + 'listadoTorresSeguimiento.php',
        root: 'data',
        fields: [
            'nm_sub_tramo', 'pre_hormigonado_porcentaje', 'hormigonado_porcentaje', 'montaje_porcentaje', 'tendido_porcentaje', 
            'sub_tramo_total','fecha_actualizacion','fecha_actualizacion_datos'
        ], 
        autoLoad : true
    });

    storeSeguimiento.on('load', function () {
        storeSeguimiento.data.each(function(item, index, totalItems ) {
            data1.push([parseFloat(item.data ['tendido_porcentaje']), 
                        parseFloat(item.data ['montaje_porcentaje']), 
                        parseFloat(item.data ['hormigonado_porcentaje'])]);

            
        });
    });

    canvasPanel = new Ext.Panel({
        autoWidth: true
        ,autoHeight:true,
        frame:true
    });

    //
    var chartPanel = Ext.getCmp('grafico_avance_tareas');

    storeSeguimiento.on('load', function ( control, records, options ) {
        fechaActualizacion = records[0].json.fecha_actualizacion;
        var fecha_actualizacion_datos = records[0].json.fecha_actualizacion_datos;

        //Fecha de Datos y Momento de la Actualización
        var titulo = 'Acompañamiento gráfico. <FONT SIZE="1"><i>[Datos al: ';
        chartPanel.setTitle(titulo + fechaActualizacion + ". Momento de la actualización: " + fecha_actualizacion_datos + "]</i></FONT>");

        dibujarGraficoSeguimiento(data1);
    });
    
    canvasPanel.render('grafico_avance_tareas');

    chartPanel.add(canvasPanel);
    chartPanel.doLayout();
    chartPanel.setVisible(false);
    */
}

//Función que crea el control con los Tabs de Capas, Leyendas y Búsquedas
function crearPanelCapasLeyenda(){
    var westPanel = Ext.getCmp('west-panel');
    var mylayers = new Array();

    for (var i = 0; i < mapa.getNumLayers(); i++) 
    {
        var achou = false;
        for (var j = 0; j < mylayers.length; j++) 
        {
            if (mylayers[j].name == mapa.layers[i].name) { achou = true }
        }
        if (!achou) { mylayers.push(mapa.layers[i]); }
    }
    
    var store = new GeoExt.data.LayerStore(
    {
        map: mapa,
        initDir:0,
        layers: mylayers
    });
    
    var layersPanel = new Ext.TabPanel(
    {
        id: 'layers-panel',
        border: true,
        activeTab: 0,
        enableTabScroll:true,
        autoScroll: true,
        defaults: { border: false },
        items: [
            {
                id: 'tab_capas',
                title: 'Capas',
                autoScroll: true,
                listeners: { activate: updateThemeLayers }
            },
            {
                id: 'tab_leyendas',
                title: 'Leyenda',
                autoScroll: true,

                listeners: { activate: updateLegendPanel }
            }/*,{
                id: 'busqueda_por_id',
                title: 'Por ID',
                autoScroll: true,
                listeners: { activate: crearFindPanel }
            },{
                id: 'busqueda_por_tipo',
                title: 'Por Tipo',
                autoScroll: true,
                listeners: { activate: crearFindPanelTipo }
            },{
                id: 'busqueda_por_etapa',
                title: 'Por Etapa',
                autoScroll: true,
                listeners: { activate: crearFindPanelEtapa }
            }*/
        ]
    });

    westPanel.add(layersPanel);
}

//Actualiza el texto del control 
function setStatus(control, msg){

    OpenLayers.Util.getElement(control).innerHTML = msg;
}

//Función el control principal contenedor.
function crearMapPanel() {
    var coordsTextItem = new Ext.Toolbar.TextItem({id: 'coord', text: 'Long.:    Lat.:   '});
    var msgStatus = new Ext.Toolbar.TextItem({id: 'status', text: ''});
    var usuarioPerfil = new Ext.Toolbar.TextItem({id: 'usuario_perfil', text: ''});

    var cols = ['gid', 'cd', 'alim', 'nummedidor','longitud', 'latitud'];

    var select = new GeoExt.grid.FeatureSelectionModel({autoPanMapOnSelection: true, layerFromStore: false});
    var reader = new GeoExt.data.FeatureReader({}, cols);

    var store = new GeoExt.data.FeatureStore({
        reader : reader,
        fields : cols,
        autoLoad : false
    });

    // Grilla con los resultados de la Búsqueda
    var grilla = new Ext.grid.GridPanel({
        region : "center",
        stripeRows : true,
        store : store,
        sm : select                               
    });

    var protocol = new OpenLayers.Protocol.WFS({
        srsName : "EPSG:900913",
        version : "1.1.0",
        url : "http://" + host + ":" + portGeoserver +"/geoserver/wfs",
        featureType : "transformador",
        geometryName : "the_geom"
    });


    //Control de búsqueda o filtrado por ID
    var filtrarxid = new GeoExt.form.FormPanel({
        width: 60,
        height : 23,
        region : "north",
        protocol : protocol,
        items : [{
                    xtype : "textfield",

                    //autoWidth : true,
                    id : "trafoid",
                    name : "nummedidor__eq",
                    value : "",
                    allowBlank : true,
                    minLength : 1,
                    disabled : false,
                    listeners : {
                        afterrender : function(field) {
                            field.focus();
                        }
                    }
                }],
        listeners : {
            actioncomplete : function(form, action) {
                var features = action.response.features;

                if (features.length > 0){
                    store.loadData(features);

                    //Traer los datos de Longitud y Latitud para centrar la vista.
                    var longi = features[0].attributes.longitud;
                    var lati = features[0].attributes.latitud;

                    var myStyles = new OpenLayers.StyleMap({
                        "default": new OpenLayers.Style({
                            pointRadius: "5", // sized according to type attribute
                            fillColor: "transparent",
                            strokeColor: "#ff9933",
                            strokeWidth: 2,
                            graphicZIndex: 1
                        }),
                        "select": new OpenLayers.Style({
                            fillColor: "transparent",
                            strokeColor: "#3399ff",
                            graphicZIndex: 2
                        })
                    });


                    var vecLayer = new OpenLayers.Layer.Vector('Transformador', 
                    { 
                        displayInLayerSwitcher: false,    
                        visibility: false,
                        renderers: OpenLayers.Layer.Vector.prototype.renderers,
                        styleMap: myStyles,
                        rendererOptions: {zIndexing: true}
                    });
                    vecLayer.displayInLayerSwitcher = false;
                    store.bind(vecLayer);
                    mapa.addLayer(vecLayer);
                    select.bind(vecLayer, {multiple: false, clickout:true, toggle:true});  

                    //centrar la vista y hacer zoom
                    var pos = new OpenLayers.LonLat(longi, lati).transform( new OpenLayers.Projection("EPSG:4326"), // transforma de WGS 1984
                        new OpenLayers.Projection("EPSG:900913") // para a projeção Spherical Mercator
                    );

                    mapa.setCenter(pos, 15);

                    var popup = new OpenLayers.Popup.FramedCloud(
                        "pumapa", 
                        pos, 
                        null,
                        "<label><b>" + features[0].attributes.cd + "\n" + features[0].attributes.nummedidor + "</label>",
                        null,
                        true
                    );

                    mapa.addPopup(popup);

                    popup.events.register("click", mapa, function puDestroy(e) {
                                                            popup.destroy();
                                                            popup = null;
                                                            OpenLayers.Util.safeStopPropagation(e);
                                                        });


                    setStatus('status', '');
                }
                else
                    setStatus('status', "<label><b>Ningún registro encontrado...</label>");
                
            }
        },
        keys : [{
                key : [Ext.EventObject.ENTER],
                handler : function() {
                    var idIngresado = Ext.getCmp('trafoid').getValue();

                    if (idIngresado !== '') {
                        setStatus('status', "<label><b>Realizando búsqueda... Aguarde un momento... </label>");;
                        filtrarxid.search();
                    }
                    else
                        setStatus('status', "<label><b>Debe ingresar un Nº de Medidor... </label>");;
                }
            }]
    });

    
    mapPanel = new Ext.Panel(
    {        
        layout: 'border',
        items: [
            {
                id: 'panel-abajo',
                region: 'west',
                layout: 'border',
                split: true,
                collapsible: true,
                collapsed: false,
                //collapseMode: 'mini',
                floatable: false,
                //height: 230,
                width: '15%',
                margins: '5 0 5 5',
                items: [{
                    id: 'west-panel'
                    ,region:'center'
                    ,width: '28%'//'25%'
                    ,border:true
                    ,autoScroll:true
                    //,title:'Selección de Capas, Leyendas y Búsqueda'
                    ,title:'Selección de Capas y Leyendas'
                    ,bodyStyle:'padding:5px;font-size:11px;background-color:#f4f4f4;'
                    ,collapsible:false
                    ,split:true
                }/*,{
                    id: 'grafico_avance_tareas'
                    ,region:'center'
                    ,border:true
                    ,bodyStyle:'background-color:#f4f4f4;'
                    //,title:'Acompañamiento gráfico de la Línea de 500 KV'
                    ,width: '50%'
                    ,collapsible:true
                    ,split:true
                },{
                    id: 'grafico_proyectado_ejecutado'
                    ,region:'east'
                    ,border:true
                    ,autoScroll:true
                    
                    ,bodyStyle:'background-color:#f0f0f0;'
                    ,title:'Gráfico de Acompañamiento Proyectado vs Ejecutado'
                    ,collapsible:true
                    ,split:true
                }*/]
            },
            {
                id: 'center-panel',
                xtype: 'gx_mappanel',
                region: 'center',
                margins: '5 5 5 0',
                cls: 'x-btn-text-icon',
                bbar: [createZoomSelector(), '-'], 
                tbar: [ coordsTextItem, '-', usuarioPerfil ,'-',
                    '->',
                    msgStatus,
                    '-',
                    {
                        icon: 'Content/img/idtorre.png',
                        text: 'Nº Medidor:',
                        handler : function() {
                            Ext.getCmp('trafoid').focus('', 10);
                        }                        
                    },
                    filtrarxid,
                    '-',
                    {
                        icon: 'Content/img/search_map.png',
                        text: 'C/S Medidor:',
                        handler : function() {
                            Ext.getCmp('combosubtramos').focus('', 10);
                        }                        
                    },
                    createConSinMedidorSelector(),
                    ' ', 
                    {xtype : 'tbseparator' },
                    {
                        text : 'Recargar Mapa',
                        icon: 'Content/img/refresh.png',
                        handler : function() {
                            var redirect = "http://" + host + ":" + portHttp +"/" + nombrePortal;
                            window.location = redirect;
                        }
                    },
                    { xtype : 'tbseparator' },
                    {
                        icon: 'Content/img/tools.png',
                        text : 'Opciones',
                        menu: [
                            {
                                text : 'Subir Archivos',
                                icon: 'Content/img/up.png',
                                handler : function() {
                                    subirArchivos();
                                }
                            },
                            { xtype : 'tbseparator' },

                            {
                                text : 'Cambiar Clave',
                                icon: 'Content/img/cambiar.png',
                                handler : function() {
                                    cambiarClaveUsuario(false);
                                }
                            },
                            '-',
                            {
                                text : 'Cerrar Sesión',
                                icon: 'Content/img/salir.png',
                                handler : function() {
                                    cerrarSesion();
                                }
                            },
                            '-',
                            {
                                icon: 'Content/img/ayuda.png',
                                text : 'Ayuda',
                                handler : function() {
                                    var redirect = "ayuda/index.html";
                                    window.open(redirect,'_blank');
                                }                       
                            }
                            ]                           
                    }
                    
                ],
                map: mapa
            }
        ]
    });

    //Control principal contenedor
    var mainPanel = new Ext.Viewport({
        id: 'viewport',
        layout: 'border',
        border: false,
        items: [{
            border: false,
            region: 'center',
            renderTo: 'map-area',
            layout:'fit',
            margins: { bottom:50 },
            items:[mapPanel]
        }]
    });
}

//Para Filtrado de Torres exacta por ID en el Formulario de Adjuntar archivos a la torre.
function crearTabFiltradoID(container) {

    gidTorre = '';
    gTorre = '';

    var cols = ['gid', 'torre', 'tipo', 'longitud', 'latitud','tramo', 'nombre_estado', 'con_adjunto'];

    var select = new GeoExt.grid.FeatureSelectionModel({autoPanMapOnSelection: true, layerFromStore: false});
    var reader = new GeoExt.data.FeatureReader({}, cols);

    var store = new GeoExt.data.FeatureStore({
        reader : reader,
        fields : cols,
        autoLoad : false
    });

    // Grilla con los resultados de la Búsqueda
    buscarGrilla = new Ext.grid.GridPanel({
        id: 'torresXID',
        title : "Listado de Torres",
        height : 500,
        region : "center",
        stripeRows : true,
        //autoExpandColumn : "torre",
        store : store,
        columns : [{
                    id : "gid",
                    header : "ID",
                    width : 10,
                    sortable : true,
                    hidden : true,
                    dataIndex : "gid"
                }, {
                    id : "torre",
                    header : "ID Torre",
                    width : 60,
                    sortable : true,
                    dataIndex : "torre"
                }, {
                    header : "Tipo",
                    width : 100,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tipo"
                }, {
                    header : "Tramo",
                    width : 100,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tramo"
                }, {
                    header : "Estado",
                    width : 80,
                    align : 'right',
                    sortable : true,
                    dataIndex : "nombre_estado"
                }, {
                    header : "Adjunto",
                    width : 40,
                    align : 'center',
                    sortable : true,
                    dataIndex : "con_adjunto",
                    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                         switch (value) {
                            case '1':
                                metaData.css = 'con-adjunto';
                                break;
                            case '0':
                                metaData.css = '';
                                break;
                         }
                         return '';     // Return an empty string so only the cell's background is visible
                    }
                }],
        sm : select,
        listeners : {
            rowclick : function(g, rowIndex, e) {
                var rec = store.getAt(rowIndex);

                gidTorre = rec.get('gid');
                gTorre = rec.get('torre');
            },
            rowdblclick : function(g, rowIndex, e) {
                var rec = store.getAt(rowIndex);

                var longi = rec.get('longitud');
                var lati = rec.get('latitud');

                var pos = new OpenLayers.LonLat(longi, lati).transform( new OpenLayers.Projection("EPSG:4326"), // transforma de WGS 1984
                    new OpenLayers.Projection("EPSG:900913") // para a projeção Spherical Mercator
                );

                mapa.setCenter(pos, 14);
                //mapa.zoomToExtent(dataExtent);  

                var _torre= rec.get('torre');
                var _tipo = rec.get('tipo');

                gidTorre = rec.get('gid');
                gTorre = rec.get('torre');

                var popup = new OpenLayers.Popup.FramedCloud(
                    "pumapa", 
                    pos, //mapa.getLonLatFromPixel(e.xy),
                    null,
                    "<label><b>" + _torre + "\n" + _tipo + "</label>",
                    null,
                    true
                );

                mapa.addPopup(popup);

                popup.events.register("click", mapa, function puDestroy(e) {
                                                        popup.destroy();
                                                        popup = null;
                                                        OpenLayers.Util.safeStopPropagation(e);
                                                    });


                setStatus('status', '');
            }
        },                                  
    }); 

    var protocol = new OpenLayers.Protocol.WFS({
        srsName : "EPSG:900913",
        version : "1.1.0",
        url : "http://" + host + ":" + portGeoserver +"/geoserver/wfs",
        featureType : "torre_punto",
        geometryName : "the_geom"
    });


    buscarForm = new GeoExt.form.FormPanel({
        //title : "Búsqueda",
        height : 30,
        region : "north",
        protocol : protocol,
        items : [{
                    xtype : "textfield",
                    width : 40,
                    id : "nombreTorreTab",
                    name : "torre__like",
                    fieldLabel : '&nbsp;&nbsp;&nbsp;<b>ID Torre</b>',
                    value : "",
                    allowBlank : false,
                    minLength : 1,
                    /*listeners : {
                        afterrender : function(field) {
                            //field.focus();
                            var tf = Ext.getCmp('nombreTorre').getValue();

                            if (tf.indexOf('*') == -1) {
                                Ext.getCmp('nombreTorre').setValue(tf + "*");
                            }
                            setStatus("status","<label><b>Realizando búsqueda... Aguarde un momento... </label>");
                            buscarForm.search();
                        }
                    }*/
                }],
        listeners : {
            actioncomplete : function(form, action) {
                var myStyles = new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                        pointRadius: "5", // sized according to type attribute
                        fillColor: "transparent",
                        strokeColor: "#ff9933",
                        strokeWidth: 2,
                        graphicZIndex: 1
                    }),
                    "select": new OpenLayers.Style({
                        fillColor: "transparent",
                        strokeColor: "#3399ff",
                        graphicZIndex: 2
                    })
                });

                var features = action.response.features;
                store.loadData(features);
                var vecLayer = new OpenLayers.Layer.Vector('Torre', { visibility: false, styleMap: myStyles});
                vecLayer.displayInLayerSwitcher = false;
                store.bind(vecLayer);
                mapa.addLayer(vecLayer);
                select.bind(vecLayer, {multiple: false, clickout:true, toggle:true});  

                //Actualizamos los resultados obtenidos.
                Ext.getCmp('torresXID').setTitle('Listado de Torres (' + features.length +' registro/s encontrado/s)');
                setStatus("status","");

                //Obtenemos el filtro aplicado sobre los datos.
                var valor = Ext.getCmp('nombreTorreTab').getValue();
                //Borramos el * al final del texto
                valor = valor.substring(0,valor.length-1);

                var cant = metcapas.length
                //Recorremos las capas y filtramos los datos.
                for (var count = 0; count < cant ; count++)
                {
                    //Estos son las capas que serán filtradas.
                    if (metcapas[count].name == "Torres Línea de 500 KV"
                        || metcapas[count].name == "Info: Hormigonado"
                        || metcapas[count].name ==  "Info: Montaje"
                        || metcapas[count].name == "Info: Tendido"
                        || metcapas[count].name == "Info: Alerta")
                    {
                        metcapas[count].mergeNewParams({'CQL_FILTER': "torre LIKE '" + valor +"%' "});
                        metcapas[count].redraw();
                    }
                }                
            }
        },
        keys : [{
                key : [Ext.EventObject.ENTER],
                handler : function() {
                    var tf = Ext.getCmp('nombreTorreTab').getValue();

                    if (tf.indexOf('*') == -1) {
                        Ext.getCmp('nombreTorreTab').setValue(tf + "*");
                    }
                    setStatus("status","<label><b>Realizando búsqueda... Aguarde un momento... </label>");
                    buscarForm.search();
                }
            }]
    });

    buscar = new Ext.Panel({
        id: 'buscarTorre',
        collapsible : false,
        split : true,
        anchor : '100%',
        autoScroll: true,
        hideBorders : false,
        items: [buscarForm, buscarGrilla]          
    });
    
    container.removeAll(true);
    container.add(buscar);
    container.doLayout();
}

//Para Filtrado de Torres por Tipo de Torre en el Formulario de Adjuntar archivos a la torre.
function crearTAbFiltradoTipoTorre(container) {
    var buscarForm;

    gidTorre = '';
    gTorre =  '';

    var cols = ['gid', 'torre', 'tipo', 'longitud', 'latitud','tramo', 'nombre_estado', 'con_adjunto'];

    var select = new GeoExt.grid.FeatureSelectionModel({autoPanMapOnSelection: true, layerFromStore: false});
    var reader = new GeoExt.data.FeatureReader({}, cols);

    var store = new GeoExt.data.FeatureStore({
        reader : reader,
        fields : cols,
        autoLoad : false
    });

    var subtramo = Ext.data.Record.create(['tipo']);

    //Datos de tipos de torre
    var storesubtramo = new Ext.data.Store({
        url : pathScripts + 'get-tipostorre.php',
        reader : new Ext.data.JsonReader({
                    root : 'data',
                    idProperty : 'tipo'
                }, subtramo),
        autoLoad : true
    });


    // Combo para seleccionar alguna capa para realizar la búsqueda
    var combo = new Ext.form.ComboBox(
    {
        store : storesubtramo,
        id: 'combotipos2',
        editable: false,
        labelWidth: -20,
        autoWidth : true,
        valueField : 'tipo',
        displayField: 'tipo',
        mode : 'local',
        triggerAction : 'all',
        name : "tipo__eq",
        emptyText : 'Seleccionar...',
        selectOnFocus : true,
        listeners : {
            select : function(field, rec, selIndex) {
                setStatus("status","<label><b>Realizando búsqueda... Aguarde un momento... </label>");
                buscarForm.search();
            }
        }
    }); 
   
    // Grilla con los resultados de la Búsqueda
    buscarGrilla = new Ext.grid.GridPanel({
        title : "Listado de Torres",
        id: 'filrtadoXTipo',
        height : 500,
        region : "center",
        stripeRows : true,
        store : store,
        columns : [{
                    id : "gid",
                    header : "ID",
                    width : 10,
                    sortable : true,
                    hidden : true,
                    dataIndex : "gid"
                }, {
                    id : "torre",
                    header : "ID Torre",
                    width : 60,
                    sortable : true,
                    dataIndex : "torre"
                }, {
                    header : "Tipo",
                    width : 100,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tipo"
                }, {
                    header : "Tramo",
                    width : 100,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tramo"
                }, {
                    header : "Estado",
                    width : 80,
                    align : 'right',
                    sortable : true,
                    dataIndex : "nombre_estado"
                }, {
                    header : "Adjunto",
                    width : 40,
                    align : 'center',
                    sortable : true,
                    dataIndex : "con_adjunto",
                    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                         switch (value) {
                            case '1':
                                metaData.css = 'con-adjunto';
                                break;
                            case '0':
                                metaData.css = '';
                                break;
                         }
                         return '';     // Return an empty string so only the cell's background is visible
                    }
                }],
        sm : select,
        listeners : {
            rowclick : function(g, rowIndex, e) {
                var rec = store.getAt(rowIndex);

                gidTorre = rec.get('gid');
                gTorre = rec.get('torre');
            },
            rowdblclick : function(g, rowIndex, e) {
                var rec = store.getAt(rowIndex);

                var longi = rec.get('longitud');
                var lati = rec.get('latitud');

                var pos = new OpenLayers.LonLat(longi, lati).transform( new OpenLayers.Projection("EPSG:4326"), // transforma de WGS 1984
                    new OpenLayers.Projection("EPSG:900913") // para a projeção Spherical Mercator
                );

                mapa.setCenter(pos, 14);

                var _torre= rec.get('torre');
                var _tipo = rec.get('tipo');

                gidTorre = rec.get('gid');
                gTorre = rec.get('torre');
                
                //Popup con informacion de la torre
                var popup = new OpenLayers.Popup.FramedCloud(
                    "pumapa", 
                    pos, 
                    null,
                    "<label><b>" + _torre + "\n" + _tipo + "</label>",
                    null,
                    true
                );

                mapa.addPopup(popup);

                popup.events.register("click", mapa, function puDestroy(e) {
                                                        popup.destroy();
                                                        popup = null;
                                                        OpenLayers.Util.safeStopPropagation(e);
                                                    });


                setStatus('status', '');
            }
        },                                  
    }); 
    
    //Protocolo para la busqueda
    var protocol = new OpenLayers.Protocol.WFS({
        srsName : "EPSG:900913",
        version : "1.1.0",
        url : "http://" + host + ":" + portGeoserver +"/geoserver/wfs",
        featureType : "torre_punto",
        geometryName : "the_geom"
    });

    //Formulario de búsqueda
    buscarForm = new GeoExt.form.FormPanel({
        //title : "Búsqueda",
        height : 30,
        region : "north",
        protocol : protocol,
        items : [combo],
        listeners : {
            actioncomplete : function(form, action) {
                var myStyles = new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                        pointRadius: "5", // sized according to type attribute
                        fillColor: "transparent",
                        strokeColor: "#ff9933",
                        strokeWidth: 2,
                        graphicZIndex: 1
                    }),
                    "select": new OpenLayers.Style({
                        fillColor: "transparent",
                        strokeColor: "#3399ff",
                        graphicZIndex: 2
                    })
                });

                var features = action.response.features;
                store.loadData(features);
                var vecLayer = new OpenLayers.Layer.Vector('Torre', {visibility: false, styleMap: myStyles});
                vecLayer.displayInLayerSwitcher = false;
                store.bind(vecLayer);
                mapa.addLayer(vecLayer);
                select.bind(vecLayer, {multiple: false, clickout:true, toggle:true});  

                Ext.getCmp('filrtadoXTipo').setTitle('Listado de Torres (' + features.length +' registro/s encontrado/s)');
                setStatus("status","");

                //Obtenemos el filtro aplicado sobre los datos.
                var valor = Ext.getCmp('combotipos2').value;
                
                var cant = metcapas.length
                //Recorremos las capas y filtramos los datos.
                for (var count = 0; count < cant ; count++)
                {

                    if (metcapas[count].name == "Torres Línea de 500 KV"
                        || metcapas[count].name == "Info: Hormigonado"
                        || metcapas[count].name ==  "Info: Montaje"
                        || metcapas[count].name == "Info: Tendido"
                        || metcapas[count].name == "Info: Alerta")
                    {
                        metcapas[count].mergeNewParams({'CQL_FILTER': "tipo = '" + valor +"' "});
                        metcapas[count].redraw();
                    }
                }                
            }
        }
    });

    var buscar = new Ext.Panel({
        id: 'buscarTorreTipo',
        collapsible : false,
        split : true,
        anchor : '100%',
        autoScroll: true,
        hideBorders : false,
        items: [buscarForm, buscarGrilla]          
    });

    container.removeAll(true);
    container.add(buscar);
    container.doLayout();
}

//Para Filtrado de Torres por Etapa de trabajo en el Formulario de Adjuntar archivos a la torre.
function crearTabFiltradoEtapa(container) {
    var buscarForm;

    gidTorre = '';
    gTorre = '';

    var cols = ['gid', 'torre', 'tipo', 'longitud', 'latitud', 'tramo', 'nombre_estado', 'con_adjunto'];

    
    var reader = new GeoExt.data.FeatureReader({}, cols);

    store = new GeoExt.data.FeatureStore({
        reader : reader,
        fields : cols,
        autoLoad : false
    });

    var myCheckboxGroup = new Ext.form.CheckboxGroup({
        id:'checkitems',
        xtype: 'checkboxgroup',
        fieldLabel: 'Etapas',
        itemCls: 'x-check-group-alt',
        vertical: true,
        // Put all controls in a single column with width 100%
        columns: 2,
        items: [
            {boxLabel: 'Otros' },
            {boxLabel: 'Hormigonado'},
            {boxLabel: 'Montaje'},
            {boxLabel: 'Tendido'}
        ]
    });
   
    // Grilla con los resultados de la Búsqueda
    buscarGrilla = new Ext.grid.GridPanel({
        id: 'filtradoTorreEtapa',
        title : "Listado de Torres",
        height : 500,
        region : "center",
        stripeRows : true,
        //autoExpandColumn : "torre",
        store : store,
        columns : [{
                    id : "gid",
                    header : "ID",
                    width : 10,
                    sortable : true,
                    hidden : true,
                    dataIndex : "gid"
                }, {
                    id : "torre",
                    header : "ID Torre",
                    width : 60,
                    sortable : true,
                    dataIndex : "torre"
                }, {
                    header : "Tipo",
                    width : 100,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tipo"
                }, {
                    header : "Tramo",
                    width : 100,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tramo"
                }, {
                    header : "Estado",
                    width : 80,
                    align : 'right',
                    sortable : true,
                    dataIndex : "nombre_estado"
                }, {
                    header : "Adjunto",
                    width : 40,
                    align : 'center',
                    sortable : true,
                    dataIndex : "con_adjunto",
                    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                         switch (value) {
                            case '1':
                                metaData.css = 'con-adjunto';
                                break;
                            case '0':
                                metaData.css = '';
                                break;
                         }
                         return '';     // Return an empty string so only the cell's background is visible
                    }
                }],
        sm : select,
        listeners : {
            rowclick : function(g, rowIndex, e) {
                var rec = store.getAt(rowIndex);

                gidTorre = rec.get('gid');
                gTorre = rec.get('torre');
            },
            rowdblclick : function(g, rowIndex, e) {
                var rec = store.getAt(rowIndex);

                var longi = rec.get('longitud');
                var lati = rec.get('latitud');

                var pos = new OpenLayers.LonLat(longi, lati).transform( new OpenLayers.Projection("EPSG:4326"), // transforma de WGS 1984
                    new OpenLayers.Projection("EPSG:900913") // para a projeção Spherical Mercator
                );

                mapa.setCenter(pos, 14);

                var _torre= rec.get('torre');
                var _tipo = rec.get('tipo');

                gidTorre = rec.get('gid');
                gTorre = rec.get('torre');
                
                var popup = new OpenLayers.Popup.FramedCloud(
                    "pumapa", 
                    pos, //mapa.getLonLatFromPixel(e.xy),
                    null,
                    "<label><b>" + _torre + "\n" + _tipo + "</label>",
                    null,
                    true
                );

                mapa.addPopup(popup);

                popup.events.register("click", mapa, function puDestroy(e) {
                                                        popup.destroy();
                                                        popup = null;
                                                        OpenLayers.Util.safeStopPropagation(e);
                                                    });


                setStatus('status', '');
            }
        },                                  
    }); 

    var protocol = new OpenLayers.Protocol.WFS({
        srsName : "EPSG:900913",
        version : "1.1.0",
        url : "http://" + host + ":" + portGeoserver +"/geoserver/wfs",
        featureType : "torre_punto",
        geometryName : "the_geom"
    });


    buscarForm = new GeoExt.form.FormPanel({
        //title : "Búsqueda",
        //height : 30,
        autoHeight: true,
        region : "north",
        //protocol : protocol,
        cls: 'x-btn-text-icon',
        bbar: [ {   text: 'Buscar', icon: 'Content/img/search.png',
                    handler: function (){
                        OpenLayers.Util.getElement("status").innerHTML = "<label><b>Info: Realizando búsqueda... Aguarde un momento... </label>";

                        var myStyles = new OpenLayers.StyleMap({
                            "default": new OpenLayers.Style({
                                pointRadius: "5", // sized according to type attribute
                                fillColor: "transparent",
                                strokeColor: "#ff9933",
                                strokeWidth: 2,
                                graphicZIndex: 1
                            }),
                            "select": new OpenLayers.Style({
                                fillColor: "transparent",
                                strokeColor: "#3399ff",
                                graphicZIndex: 2
                            })
                        });

                        var listaChecks = Ext.getCmp('checkitems');
                        var _inicio = '&CQL_FILTER=';
                        var cqlFilter = 'estado%20in%20(';
                        var cqlFilter2 = 'estado in (';

                        if (listaChecks.items.items[0].checked == true)
                        {
                            cqlFilter = cqlFilter + '1';
                            cqlFilter2 = cqlFilter2 + '1';
                        }

                        if (listaChecks.items.items[1].checked == true)
                            if (endsWith(cqlFilter,'('))
                            {
                                cqlFilter = cqlFilter + '2';
                                cqlFilter2 = cqlFilter2 + '2';
                            }
                            else{
                                cqlFilter = cqlFilter + ',2';
                                cqlFilter2 = cqlFilter2 + ',2';
                            }

                        if (listaChecks.items.items[2].checked == true)
                            if (endsWith(cqlFilter,'(')){
                                cqlFilter = cqlFilter + '3';
                                cqlFilter2 = cqlFilter2 + '3';
                            }
                            else{
                                cqlFilter = cqlFilter + ',3';
                                cqlFilter2 = cqlFilter2 + ',3';
                            }

                        if (listaChecks.items.items[3].checked == true)
                            if (endsWith(cqlFilter,'(')){
                                cqlFilter = cqlFilter + '4';
                                cqlFilter2 = cqlFilter2 + '4';
                            }
                            else {
                                cqlFilter = cqlFilter + ',4';
                                cqlFilter2 = cqlFilter2 + ',4';
                            }

                        if (endsWith(cqlFilter,'('))
                        {
                            cqlFilter = '';
                            cqlFilter2 = '';
                        }
                        else {
                            cqlFilter = cqlFilter +')';
                            cqlFilter2 = cqlFilter2 + ')';
                        }

                        var url = "http://" + host + ":" + portGeoserver +"/geoserver/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=portal:torre_punto" + _inicio + cqlFilter;



                        var cant = metcapas.length;
                        //Recorremos las capas y filtramos los datos.
                        for (var count = 0; count < cant ; count++)
                        {

                            if (metcapas[count].name == "Torres Línea de 500 KV" 
                                || metcapas[count].name == "Info: Hormigonado"
                                || metcapas[count].name ==  "Info: Montaje"
                                || metcapas[count].name == "Info: Tendido"
                                || metcapas[count].name == "Info: Alerta")
                            {
                                metcapas[count].mergeNewParams({'CQL_FILTER': cqlFilter2 });
                                metcapas[count].redraw();
                            }
                        }

                        OpenLayers.loadURL(url, '', this, wfsRespuesta);
                    } 
                }
            ],
        items : [myCheckboxGroup],
        keys : [{
            key : [Ext.EventObject.ENTER],
            handler : function() {
                
            }
        }]
    });

    var buscar = new Ext.Panel({
        id: 'buscarTorreEstado',
        collapsible : false,
        split : true,
        anchor : '100%',
        autoScroll: true,
        hideBorders : false,
        items: [buscarForm, buscarGrilla]          
    });

    container.removeAll(true);
    container.add(buscar);
    container.doLayout();
}

//En base a la respuesta WFS, actualiza la capa de resultados y el valor de la cantidad de registros obtenidos
function wfsRespuesta(transport) 
{
    // parser le résultat en features
    var gmlParser = new OpenLayers.Format.GML();
    var features = gmlParser.read(transport.responseText);

    var myStyles = new OpenLayers.StyleMap({
        "default": new OpenLayers.Style({
            pointRadius: "5", // sized according to type attribute
            fillColor: "transparent",
            strokeColor: "#ff9933",
            strokeWidth: 2,
            graphicZIndex: 1
        }),
        "select": new OpenLayers.Style({
            fillColor: "transparent",
            strokeColor: "#3399ff",
            graphicZIndex: 2
        })
    });

    store.loadData(features);
    var vecLayer = new OpenLayers.Layer.Vector('Torre', {visibility: false, styleMap: myStyles});
    vecLayer.displayInLayerSwitcher = false;
    store.bind(vecLayer);
    mapa.addLayer(vecLayer);
    select.bind(vecLayer, {multiple: false, clickout:true, toggle:true});  

    Ext.getCmp('filtradoTorreEtapa').setTitle('Listado de Torres (' + features.length +' registro/s encontrado/s)');
    setStatus("status","");  
}

//Función que crea el formulario para Administrar los archivos relacionados a las Torres
function subirArchivos()
{
    //Verificamos si el usuario autenticado tiene permisos de ejecución
    if (verificarPermisoArchivosUsuario())
    {
        //Control con tabs
        var tabs = new Ext.TabPanel(
        {
            id: 'layers-panel',
            border: true,
            activeTab: 0,
            //resizeTabs: true,
            enableTabScroll:true,
            autoScroll: true,
            defaults: { border: false },
            items: [
               {
                    id: 'filtrar_por_id',
                    title: 'Por ID',
                    autoScroll: true,
                    listeners: { activate: crearTabFiltradoID }
                },{
                    id: 'filtrar_por_tipo',
                    title: 'Por Tipo',
                    autoScroll: true,
                    listeners: { activate: crearTAbFiltradoTipoTorre }
                },{
                    id: 'filtrar_por_etapa',
                    title: 'Por Etapa',
                    autoScroll: true,
                    listeners: { activate: crearTabFiltradoEtapa }
                }
            ]
        });

        //Ventana a mostrarse
        var upload = new Ext.Window(
        {
            layout:'fit',
            width: 450,
            height: 500,
            title:"Archivos asociados a las Torres",
            modal:false,
            autoDestroy :true,
            monitorValid:true,
            resizable:true,
            items: [tabs],
            bbar: [
            { 
                xtype: 'button',
                cls:  'x-btn-text-icon',
                icon: 'Content/img/ver.png',
                text: 'Ver Archivo/s',
                handler : function() 
                {
                    if (gidTorre !== '')
                    {
                        //Adjuntar de alguna manera
                        var redirect = 'fmanager/fmanager.php?torre=' + gidTorre + '&idtorre=' +gTorre;
                        window.open(redirect,'_blank');
                    }
                    else
                    {
                        Ext.Msg.show({
                           title:'Ver Archivo/s',
                           msg: 'Debe seleccionar una Torre para asociar un archivo adjunto.',
                           buttons: Ext.Msg.OK,
                           animEl: 'elId',
                           icon: Ext.MessageBox.ERROR
                        }); 
                    }
                }
            }]
        });     

        upload.show();
    }
    else
    {
        Ext.Msg.show({
           title:'Ver Archivo/s',
           msg: 'No tiene permiso para ejecutar esta funcionalidad. Comunicarse con el Administrador.',
           buttons: Ext.Msg.OK,
           animEl: 'elId',
           icon: Ext.MessageBox.ERROR
        }); 
    }
}

//Función para cambiar la clave del usuario autenticado
function cambiarClaveUsuario(cerrar){
    
    var form = new Ext.FormPanel(
    {
        defaults: {
            width: 270
        },
        autoHeight: true,
        renderTo: 'map-area',
        bodyStyle: 'padding-left:5px;,padding-top:10px;', 
        style:'background:#FEFEFE',
        labelWidth: 0,
        items: 
        [
            {
                xtype : "textfield",
                inputType: 'password',
                fieldLabel : 'Clave anterior',
                id : 'clave-anterior',
                allowBlank: false,
                width : 150,
                blankText: 'Ingrese la Clave anterior',
                labelStyle: 'line-height:10px;font-size:10px; text-align: left; font-weight:bold;',
                isteners : {
                    afterrender : function(field) {
                        field.focus();
                    }
                }
            },
            {
                xtype : "textfield",
                inputType: 'password',
                fieldLabel : 'Nueva Clave',
                id : 'nueva-clave',
                allowBlank: false,
                width : 150,
                blankText: 'Ingrese la nueva Clave',
                labelStyle: 'line-height:10px;font-size:10px; text-align: left; font-weight:bold;'
            },
            {
                xtype : "textfield",
                inputType: 'password',
                fieldLabel : 'Confirmar nueva Clave',
                id : 'confirmar-nueva-clave',
                allowBlank: false,
                width : 150,
                blankText: 'Confirme la nueva Clave',
                labelStyle: 'line-height:10px;font-size:10px; text-align: left; font-weight:bold;',
                listeners: { 
                    scope: this,
                    specialkey: function (f, e) 
                    {
                        if (e.getKey() === e.ENTER) 
                        { 
                            cambiarClave(); 
                        }
                    }
                }
            }
        ]
    });
    
    var formulario = new Ext.Window({
        id: 'cambio-clave',
        renderTo: 'map-area',
        width: 320,
        height: 160,
        closable: !cerrar,
        title: "Cambio de Clave", 
        modal: true,
        labelWidth: 0,
        autoDestroy : true,
        monitorValid: true,
        resizable: false,
        items: 
        [
            form
        ],
        bbar: [{ 
            xtype: 'button',
            cls:  'x-btn-text-icon',
            icon: 'Content/img/ok.png',
            text: 'Cambiar Clave',
            handler : function() 
            {
                cambiarClave();
            }
        }]
    });     
    formulario.show(); 
}

//Función que ejecuta la sentencia de cambio de clave del usuario
function cambiarClave()
{
    var form = Ext.getCmp('cambio-clave');
    var clave_old = Ext.getCmp('clave-anterior').getValue(); 
    var clave_new = Ext.getCmp('nueva-clave').getValue(); 
    var clave_conf = Ext.getCmp('confirmar-nueva-clave').getValue(); 

    var claves_iguales = clave_conf == clave_new;
    var error = false;
    var entro = false;

    if (claves_iguales)
    {
        Ext.Ajax.request({
           url: pathScripts + 'cambiar-clave.php',
           method: "POST",
           params :
           {
                usuario: usuario,
                anterior_clave: clave_old,
                nueva_clave: clave_conf
           },
           success: function(response, opts) {
                var obj = Ext.util.JSON.decode(response.responseText);
                
                entro = true;

                if (obj.msj.startsWith('Error.'))
                {
                    Ext.Msg.show({
                       title:'Cambio de Clave-Error',
                       msg: obj.msj,
                       buttons: Ext.Msg.OK,
                       animEl: 'elId',
                       icon: Ext.MessageBox.ERROR
                    });

                    error = true;
                }
                else
                {
                    Ext.Msg.show({
                       title:'Cambio de Clave',
                       msg: obj.msj,
                       buttons: Ext.Msg.OK,
                       animEl: 'elId',
                       icon: Ext.MessageBox.INFO
                    });    
                    
                    form.close();
                }
           },
           failure: function(response) {
                var jsonData = Ext.util.JSON.decode(response.responseText);
                var resultMessage = jsonData.error;

                entro = true;

                Ext.Msg.show({
                   title:'Cambio de Clave-Error',
                   msg: resultMessage,
                   buttons: Ext.Msg.OK,
                   animEl: 'elId',
                   icon: Ext.MessageBox.ERROR
                });

                error = true;
           }
        });

        if (!error && entro)
        {
            Ext.Msg.show({
               title:'Cambio de Clave',
               msg: 'Modificación exitosa',
               buttons: Ext.Msg.OK,
               animEl: 'elId',
               icon: Ext.MessageBox.INFO
            });  

            form.close();
        }
    }
    else
    {
        Ext.Msg.show({
           title:'Cambio de Clave-Error',
           msg: 'Las nueva Clave y su confirmación no coinciden. Verifique por favor.',
           buttons: Ext.Msg.OK,
           animEl: 'elId',
           icon: Ext.MessageBox.ERROR
        });
    }
}

//Actualiza el contol Tab contenedor de las leyendas de las capas
function CreateLegendBox() {
    var legendLayers = new Array();
    var layer;

    for (var i = 0; i < mapa.getNumLayers(); i++) 
    {
        var achou = false;
        for (var j = 0; j < legendLayers.length; j++) {
            if (legendLayers[j].name == mapa.layers[i].name) 
            {
                achou = true 
            }
        }
        if ((!achou) && 
            (!isHiddenLayer(mapa.layers[i])) && 
            (mapa.layers[i].visibility))
        { 
            layer = mapa.layers[i];

            legendLayers.push(layer); 
        }
    }
    
    var legendStore = new GeoExt.data.LayerStore({
        map: mapa,
        initDir: 0,
        layers: legendLayers
    });

    legendPanel = new GeoExt.LegendPanel(
    {
        layout: 'anchor',
        dynamic: true,
        padding: '5',
        autoScroll: true,
        layerStore: legendStore,
        /*filter: function (record) {
             if (record.getLayer().name == 'Tramo 2'){
                record.set('hideInLegend', true);
            }
            if (record.getLayer().name == "Sub-Tramo C2"){
                record.set('hideInLegend', true);
            }
            if (record.getLayer().name == "Sub-Tramo C3"){
                record.set('hideInLegend', true);
            }
            if (record.getLayer().name == "Sub-Tramo C4"){
                record.set('hideInLegend', true);
            }
            if (record.getLayer().name == "Sub-Tramo C5"){
                record.set('hideInLegend', true);
            }
            if (record.getLayer().name == "Sub-Tramo C6"){
                record.set('hideInLegend', true);
            }

            return !record.getLayer().isBaseLayer;
        }*/
    });
}

//Si son determinadas capas, ocultarlas.
function isHiddenLayer(layer) 
{
    if (layer.name == 'Distancia y Área' || 
        layer.name == 'Diseños' ||
        layer.name == 'Torre' ||
        layer.name == 'Graticule')
        return true;
}

//Actualiza el contol Tab con las capas dentro del mapa.
function updateThemeLayers(container) 
{
    var layer;

    for (var i = 0; i < mapa.getNumLayers(); i++) {
        layer = mapa.layers[i];

        if (!isHiddenLayer(layer)) {
            layer.group = layer.groupOfTheme;
            layer.displayInLayerSwitcher = true;
        }
    }

    if (layerSwitcherByTheme) layerSwitcherByTheme.destroy();         
    layerSwitcherByTheme = createLayerSwitcher(mapa, 'layer-switcher-by-theme', container);
}

//Función que crea el Tab de búsqueda aproximada por ID de las Torres
function crearFindPanel(container) {

    var cols = ['gid', 'torre', 'tipo', 'longitud', 'latitud','tramo', 'nombre_estado'];

    var select = new GeoExt.grid.FeatureSelectionModel({autoPanMapOnSelection: true, layerFromStore: false});
    var reader = new GeoExt.data.FeatureReader({}, cols);

    var store = new GeoExt.data.FeatureStore({
        reader : reader,
        fields : cols,
        autoLoad : false
    });

    // Grilla con los resultados de la Búsqueda
    buscarGrilla = new Ext.grid.GridPanel({
        id: 'listadoTorresID',
        title : "Listado de Torres",
        height : 500,
        region : "center",
        stripeRows : true,
        store : store,
        columns : [{
                    id : "gid",
                    header : "ID",
                    width : 10,
                    sortable : true,
                    hidden : true,
                    dataIndex : "gid"
                }, {
                    id : "torre",
                    header : "ID Torre",
                    width : 70,
                    sortable : true,
                    dataIndex : "torre"
                }, {
                    header : "Tipo",
                    width : 60,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tipo"
                }, {
                    header : "Tramo",
                    width : 100,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tramo"
                }, {
                    header : "Estado",
                    width : 70,
                    align : 'right',
                    sortable : true,
                    dataIndex : "nombre_estado"
                }],
        sm : select,
        listeners : {
            rowdblclick : function(g, rowIndex, e) {
                var rec = store.getAt(rowIndex);

                var longi = rec.get('longitud');
                var lati = rec.get('latitud');

                var pos = new OpenLayers.LonLat(longi, lati).transform( new OpenLayers.Projection("EPSG:4326"), // transforma de WGS 1984
                    new OpenLayers.Projection("EPSG:900913") // para a projeção Spherical Mercator
                );

                mapa.setCenter(pos, 14);
                //mapa.zoomToExtent(dataExtent);  

                var _torre= rec.get('torre');
                var _tipo = rec.get('tipo');

                var popup = new OpenLayers.Popup.FramedCloud(
                    "pumapa", 
                    pos, //mapa.getLonLatFromPixel(e.xy),
                    null,
                    "<label><b>" + _torre + "\n" + _tipo + "</label>",
                    null,
                    true
                );

                mapa.addPopup(popup);

                popup.events.register("click", mapa, function puDestroy(e) {
                                                        popup.destroy();
                                                        popup = null;
                                                        OpenLayers.Util.safeStopPropagation(e);
                                                    });


                setStatus('status', '');
            }
        },                                  
    }); 

    var protocol = new OpenLayers.Protocol.WFS({
        srsName : "EPSG:900913",
        version : "1.1.0",
        url : "http://" + host + ":" + portGeoserver +"/geoserver/wfs",
        featureType : "torre_punto",
        geometryName : "the_geom"
    });


    buscarForm = new GeoExt.form.FormPanel({
        //title : "Búsqueda",
        height : 30,
        region : "north",
        protocol : protocol,
        items : [{
                    xtype : "textfield",
                    width : 40,
                    id : "nombreTorre",
                    name : "torre__like",
                    fieldLabel : '&nbsp;&nbsp;&nbsp;<b>ID Torre</b>',
                    value : "",
                    allowBlank : false,
                    minLength : 1,
                    listeners : {
                        afterrender : function(field) {
                            field.focus();
                        }
                    }
                }],
        listeners : {
            actioncomplete : function(form, action) {
                var myStyles = new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                        pointRadius: "5", // sized according to type attribute
                        fillColor: "transparent",
                        strokeColor: "#ff9933",
                        strokeWidth: 2,
                        graphicZIndex: 1
                    }),
                    "select": new OpenLayers.Style({
                        fillColor: "transparent",
                        strokeColor: "#3399ff",
                        graphicZIndex: 2
                    })
                });

                var features = action.response.features;
                store.loadData(features);
                var vecLayer = new OpenLayers.Layer.Vector('Torre', { visibility: false, styleMap: myStyles});
                vecLayer.displayInLayerSwitcher = false;
                store.bind(vecLayer);
                mapa.addLayer(vecLayer);
                select.bind(vecLayer, {multiple: false, clickout:true, toggle:true});  

                Ext.getCmp('listadoTorresID').setTitle('Listado de Torres (' + features.length +' registro/s encontrado/s)');
                setStatus("status","");

                //Obtenemos el filtro aplicado sobre los datos.
                var valor = Ext.getCmp('nombreTorre').getValue();
                //Borramos el * al final del texto
                valor = valor.substring(0,valor.length-1);

                var cant = metcapas.length
                //Recorremos las capas y filtramos los datos.
                for (var count = 0; count < cant ; count++)
                {

                    if (metcapas[count].name == "Torres Línea de 500 KV"
                        || metcapas[count].name == "Info: Hormigonado"
                        || metcapas[count].name ==  "Info: Montaje"
                        || metcapas[count].name == "Info: Tendido"
                        || metcapas[count].name == "Info: Alerta")
                    {
                        metcapas[count].mergeNewParams({'CQL_FILTER': "torre LIKE '" + valor +"%' "});
                        metcapas[count].redraw();
                    }
                }                
            }
        },
        keys : [{
                key : [Ext.EventObject.ENTER],
                handler : function() {
                    var tf = Ext.getCmp('nombreTorre').getValue();

                    if (tf.indexOf('*') == -1) {
                        Ext.getCmp('nombreTorre').setValue(tf + "*");
                    }
                    setStatus("status","<label><b>Realizando búsqueda... Aguarde un momento... </label>");
                    buscarForm.search();
                }
            }]
    });

    buscar = new Ext.Panel({
        id: 'buscarTorre',
        collapsible : false,
        split : true,
        anchor : '100%',
        autoScroll: true,
        hideBorders : false,
        items: [buscarForm, buscarGrilla]          
    });
    
    container.removeAll(true);
    container.add(buscar);
    container.doLayout();
}


//Crea el control ComboBox selector de Con Medidor o Sin Medidor
function createConSinMedidorSelector() 
{
    // Lista de Opciones disponibles sobre los medidores
    var data = [['0', 'General', 'general'],
                ['1', 'Con Medidor', 'transformador_con_medidor'],
                ['2', 'Sin Medidor', 'transformador_sin_medidor']];

    // Estructura a utilizar
    var datos = new Ext.data.ArrayStore({
                fields : ['id', 'descripcion', 'nombre_capa']
                ,
            });
    datos.loadData(data);

    var filtrarxid; 
    
    // Combo para seleccionar alguna capa para realizar la búsqueda
    var combo = new Ext.form.ComboBox(
    {
        store : datos,
        id: 'comboconsinmedidor',
        editable: false,
        width : 100,
        valueField : 'id',
        displayField: 'descripcion',
        mode : 'local',
        triggerAction : 'all',
        emptyText : 'Seleccionar...',
        selectOnFocus : true,
        listeners : {
            select : function(field, rec, selIndex) {
                
                var layerAextender = null;

                //Verificar con el atributo layers
                //Si no, cambiar el texto de nombre_capa por el Titulo de la Capa
                for (var i = 0; i < metcapas.length; i++) {
                    if (metcapas[i].params.STYLES.indexOf(rec.data.nombre_capa) !== -1
                        || (metcapas[i].params.STYLES.indexOf("transformador") !== -1 && rec.data.descripcion == 'General'))
                    {
                        layerAextender = metcapas[i];
                        break;
                    }
                }

                var bounds = new OpenLayers.Bounds(-74, -34, -29, 6); 
                bounds.left = layerAextender.maxExtent.left; 
                bounds.bottom = layerAextender.maxExtent.bottom; 
                bounds.right = layerAextender.maxExtent.right; 
                bounds.top = layerAextender.maxExtent.top; 
                layerAextender.map.zoomToExtent(bounds.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")));

                field.setValue(rec.data.descripcion);

                 //guardamos el subtramo elegido
                consinmedidorseleccionado = rec.data.id;

                //var tabpanel = Ext.getCmp('tabGraficos');
                

                //var container = Ext.getCmp('subtramo-c1');

                //actualizarGraficos(container);

                //tabpanel.setActiveTab('subtramo-c1');

                //Seleccionamos las Torres según el Sub-Tramo seleccionado.
                var cant = metcapas.length
                //Recorremos las capas y filtramos los datos.
                for (var count = 0; count < cant ; count++)
                {

                    if (metcapas[count].name == "Transformadores con Medidor Online"
                        || metcapas[count].name == "Transformadores sin Medidor Online"
                        )
                    {
                        if (consinmedidorseleccionado !== '0') 
                        {
                            metcapas[count].mergeNewParams({'CQL_FILTER': "medidor_online = " + (consinmedidorseleccionado == '1' ? 'true' : 'false') });
                            metcapas[count].redraw();
                        }
                        else
                        {
                            delete metcapas[count].params.CQL_FILTER;
                            metcapas[count].redraw();
                        }
                    }
                }
            }
        }
    });


    return combo;
}

//Crea el control ComboBox selector de Sub-Tramos
function createSubTramoSelector() 
{
    var filtrarxid; 
    var subtramo = Ext.data.Record.create(['id_sub_tramo','sub_tramo']);

    var storesubtramo = new Ext.data.Store({
        url : pathScripts + 'get-subtramos.php',
        reader : new Ext.data.JsonReader({
                    root : 'data',
                    idProperty : 'sub_tramo'
                }, subtramo),
        autoLoad : true
    });

    // Combo para seleccionar alguna capa para realizar la búsqueda
    var combo = new Ext.form.ComboBox(
    {
        store : storesubtramo,
        id: 'combosubtramos',
        editable: false,
        width : 100,
        //tpl: '<tpl for="."><div class="x-combo-list-item">{[values.tipo]}</div></tpl>',
        valueField : 'id_sub_tramo',
        displayField: 'sub_tramo',
        mode : 'local',
        triggerAction : 'all',
        emptyText : 'Seleccionar...',
        selectOnFocus : true,
        listeners : {
            select : function(field, rec, selIndex) {
                
                var layerAextender = null;

                for (var i = 0; i < metcapas.length; i++) {
                    if (metcapas[i].name.indexOf(rec.data.sub_tramo) !== -1
                        || (metcapas[i].name.indexOf("Línea de Transmisión") !== -1 && rec.data.sub_tramo == 'General'))
                    {
                        layerAextender = metcapas[i];
                        break;
                    }
                }

                var bounds = new OpenLayers.Bounds(-74, -34, -29, 6); 
                bounds.left = layerAextender.maxExtent.left; 
                bounds.bottom = layerAextender.maxExtent.bottom; 
                bounds.right = layerAextender.maxExtent.right; 
                bounds.top = layerAextender.maxExtent.top; 
                layerAextender.map.zoomToExtent(bounds.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")));

                field.setValue(rec.data.sub_tramo);

                 //guardamos el subtramo elegido
                consinmedidorseleccionado = rec.data.id_sub_tramo;

                //var tabpanel = Ext.getCmp('tabGraficos');
                

                //var container = Ext.getCmp('subtramo-c1');

                //actualizarGraficos(container);

                //tabpanel.setActiveTab('subtramo-c1');

                //Seleccionamos las Torres según el Sub-Tramo seleccionado.
                var cant = metcapas.length
                //Recorremos las capas y filtramos los datos.
                for (var count = 0; count < cant ; count++)
                {

                    if (metcapas[count].name == "Torres Línea de 500 KV" 
                        || metcapas[count].name == "Info: Hormigonado"
                        || metcapas[count].name ==  "Info: Montaje"
                        || metcapas[count].name == "Info: Tendido"
                        || metcapas[count].name == "Info: Alerta")
                    {
                        if (consinmedidorseleccionado !== '0') 
                        {
                            metcapas[count].mergeNewParams({'CQL_FILTER': "id_sub_tramo = '" + consinmedidorseleccionado +"' "});
                            metcapas[count].redraw();
                        }
                        else
                        {
                            delete metcapas[count].params.CQL_FILTER;
                            metcapas[count].redraw();
                        }
                    }
                }
            }
        }
    });


    return combo;
}

//Función que crea el Tab de Búsqueda por Tipo de Torre
function crearFindPanelTipo(container) {
    var buscarForm;

    var cols = ['gid', 'torre', 'tipo', 'longitud', 'latitud','tramo', 'nombre_estado'];

    var select = new GeoExt.grid.FeatureSelectionModel({autoPanMapOnSelection: true, layerFromStore: false});
    var reader = new GeoExt.data.FeatureReader({}, cols);

    var store = new GeoExt.data.FeatureStore({
        reader : reader,
        fields : cols,
        autoLoad : false
    });

    var subtramo = Ext.data.Record.create(['tipo']);

    var storesubtramo = new Ext.data.Store({
        url : pathScripts + 'get-tipostorre.php',
        reader : new Ext.data.JsonReader({
                    root : 'data',
                    idProperty : 'tipo'
                }, subtramo),
        autoLoad : true
    });


    // Combo para seleccionar alguna capa para realizar la búsqueda
    var combo = new Ext.form.ComboBox(
    {
        store : storesubtramo,
        id: 'combotipos',
        editable: false,
        labelWidth: -20,
        autoWidth : true,
        valueField : 'tipo',
        displayField: 'tipo',
        mode : 'local',
        triggerAction : 'all',
        name : "tipo__eq",
        emptyText : 'Seleccionar...',
        selectOnFocus : true,
        listeners : {
            select : function(field, rec, selIndex) {
                setStatus("status","<label><b>Realizando búsqueda... Aguarde un momento... </label>");
                buscarForm.search();
            }
        }
    }); 
   
    // Grilla con los resultados de la Búsqueda
    buscarGrilla = new Ext.grid.GridPanel({
        title : "Listado de Torres",
        id: 'listadoTorresID',
        height : 500,
        region : "center",
        stripeRows : true,
        //autoExpandColumn : "torre",
        store : store,
        columns : [{
                    id : "gid",
                    header : "ID",
                    width : 10,
                    sortable : true,
                    hidden : true,
                    dataIndex : "gid"
                }, {
                    id : "torre",
                    header : "ID Torre",
                    width : 70,
                    sortable : true,
                    dataIndex : "torre"
                }, {
                    header : "Tipo",
                    width : 70,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tipo"
                }, {
                    header : "Tramo",
                    width : 100,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tramo"
                }, {
                    header : "Estado",
                    width : 70,
                    align : 'right',
                    sortable : true,
                    dataIndex : "nombre_estado"
                }],
        sm : select,
        listeners : {
            rowdblclick : function(g, rowIndex, e) {
                var rec = store.getAt(rowIndex);

                var longi = rec.get('longitud');
                var lati = rec.get('latitud');

                var pos = new OpenLayers.LonLat(longi, lati).transform( new OpenLayers.Projection("EPSG:4326"), // transforma de WGS 1984
                    new OpenLayers.Projection("EPSG:900913") // para a projeção Spherical Mercator
                );

                mapa.setCenter(pos, 14);

                var _torre= rec.get('torre');
                var _tipo = rec.get('tipo');
                
                var popup = new OpenLayers.Popup.FramedCloud(
                    "pumapa", 
                    pos, //mapa.getLonLatFromPixel(e.xy),
                    null,
                    "<label><b>" + _torre + "\n" + _tipo + "</label>",
                    null,
                    true
                );

                mapa.addPopup(popup);

                popup.events.register("click", mapa, function puDestroy(e) {
                                                        popup.destroy();
                                                        popup = null;
                                                        OpenLayers.Util.safeStopPropagation(e);
                                                    });


                setStatus('status', '');
            }
        },                                  
    }); 

    var protocol = new OpenLayers.Protocol.WFS({
        srsName : "EPSG:900913",
        version : "1.1.0",
        url : "http://" + host + ":" + portGeoserver +"/geoserver/wfs",
        featureType : "torre_punto",
        geometryName : "the_geom"
    });


    buscarForm = new GeoExt.form.FormPanel({
        height : 30,
        region : "north",
        protocol : protocol,
        items : [combo],
        listeners : {
            actioncomplete : function(form, action) {
                var myStyles = new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                        pointRadius: "5", // sized according to type attribute
                        fillColor: "transparent",
                        strokeColor: "#ff9933",
                        strokeWidth: 2,
                        graphicZIndex: 1
                    }),
                    "select": new OpenLayers.Style({
                        fillColor: "transparent",
                        strokeColor: "#3399ff",
                        graphicZIndex: 2
                    })
                });

                var features = action.response.features;
                store.loadData(features);
                var vecLayer = new OpenLayers.Layer.Vector('Torre', {visibility: false, styleMap: myStyles});
                vecLayer.displayInLayerSwitcher = false;
                store.bind(vecLayer);
                mapa.addLayer(vecLayer);
                select.bind(vecLayer, {multiple: false, clickout:true, toggle:true});  

                Ext.getCmp('listadoTorresID').setTitle('Listado de Torres (' + features.length +' registro/s encontrado/s)');
                setStatus("status","");

                //Obtenemos el filtro aplicado sobre los datos.
                var valor = Ext.getCmp('combotipos').value;
                
                var cant = metcapas.length
                //Recorremos las capas y filtramos los datos.
                for (var count = 0; count < cant ; count++)
                {

                    if (metcapas[count].name == "Torres Línea de 500 KV"
                        || metcapas[count].name == "Info: Hormigonado"
                        || metcapas[count].name ==  "Info: Montaje"
                        || metcapas[count].name == "Info: Tendido"
                        || metcapas[count].name == "Info: Alerta")
                    {
                        metcapas[count].mergeNewParams({'CQL_FILTER': "tipo = '" + valor +"' "});
                        metcapas[count].redraw();
                    }
                }                
            }
        }
    });

    var buscar = new Ext.Panel({
        id: 'buscarTorreTipo',
        collapsible : false,
        split : true,
        anchor : '100%',
        autoScroll: true,
        hideBorders : false,
        items: [buscarForm, buscarGrilla]          
    });

    container.removeAll(true);
    container.add(buscar);
    container.doLayout();
}
//Función que crea el Tab de Búsqueda por Tipo de Torre
function crearFindPanelEtapa(container) {
    var buscarForm;

    var cols = ['gid', 'torre', 'tipo', 'longitud', 'latitud', 'tramo', 'nombre_estado'];

    
    var reader = new GeoExt.data.FeatureReader({}, cols);

    store = new GeoExt.data.FeatureStore({
        reader : reader,
        fields : cols,
        autoLoad : false
    });

    var myCheckboxGroup = new Ext.form.CheckboxGroup({
        id:'checkitems',
        xtype: 'checkboxgroup',
        fieldLabel: 'Etapas',
        itemCls: 'x-check-group-alt',
        vertical: true,
        // Put all controls in a single column with width 100%
        columns: 2,
        items: [
            {boxLabel: 'Otros' },
            {boxLabel: 'Hormigonado'},
            {boxLabel: 'Montaje'},
            {boxLabel: 'Tendido'}
        ]
    });
   
    // Grilla con los resultados de la Búsqueda
    buscarGrilla = new Ext.grid.GridPanel({
        id: 'listadoTorresEtapa',
        title : "Listado de Torres",
        height : 500,
        region : "center",
        stripeRows : true,
        //autoExpandColumn : "torre",
        store : store,
        columns : [{
                    id : "gid",
                    header : "ID",
                    width : 10,
                    sortable : true,
                    hidden : true,
                    dataIndex : "gid"
                }, {
                    id : "torre",
                    header : "ID Torre",
                    width : 70,
                    sortable : true,
                    dataIndex : "torre"
                }, {
                    header : "Tipo",
                    width : 60,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tipo"
                }, {
                    header : "Tramo",
                    width : 100,
                    align : 'right',
                    sortable : true,
                    dataIndex : "tramo"
                }, {
                    header : "Estado",
                    width : 70,
                    align : 'right',
                    sortable : true,
                    dataIndex : "nombre_estado"
                }],
        sm : select,
        listeners : {
            rowdblclick : function(g, rowIndex, e) {
                var rec = store.getAt(rowIndex);

                var longi = rec.get('longitud');
                var lati = rec.get('latitud');

                var pos = new OpenLayers.LonLat(longi, lati).transform( new OpenLayers.Projection("EPSG:4326"), // transforma de WGS 1984
                    new OpenLayers.Projection("EPSG:900913") // para a projeção Spherical Mercator
                );

                mapa.setCenter(pos, 14);

                var _torre= rec.get('torre');
                var _tipo = rec.get('tipo');
                
                var popup = new OpenLayers.Popup.FramedCloud(
                    "pumapa", 
                    pos, //mapa.getLonLatFromPixel(e.xy),
                    null,
                    "<label><b>" + _torre + "\n" + _tipo + "</label>",
                    null,
                    true
                );

                mapa.addPopup(popup);

                popup.events.register("click", mapa, function puDestroy(e) {
                                                        popup.destroy();
                                                        popup = null;
                                                        OpenLayers.Util.safeStopPropagation(e);
                                                    });


                setStatus('status', '');
            }
        },                                  
    }); 

    var protocol = new OpenLayers.Protocol.WFS({
        srsName : "EPSG:900913",
        version : "1.1.0",
        url : "http://" + host + ":" + portGeoserver +"/geoserver/wfs",
        featureType : "torre_punto",
        geometryName : "the_geom"
    });


    buscarForm = new GeoExt.form.FormPanel({
        //title : "Búsqueda",
        //height : 30,
        autoHeight: true,
        region : "north",
        //protocol : protocol,
        cls: 'x-btn-text-icon',
        bbar: [ {   text: 'Buscar', icon: 'Content/img/search.png',
                    handler: function (){
                        OpenLayers.Util.getElement("status").innerHTML = "<label><b>Info: Realizando búsqueda... Aguarde un momento... </label>";

                        var myStyles = new OpenLayers.StyleMap({
                            "default": new OpenLayers.Style({
                                pointRadius: "5", // sized according to type attribute
                                fillColor: "transparent",
                                strokeColor: "#ff9933",
                                strokeWidth: 2,
                                graphicZIndex: 1
                            }),
                            "select": new OpenLayers.Style({
                                fillColor: "transparent",
                                strokeColor: "#3399ff",
                                graphicZIndex: 2
                            })
                        });

                        var listaChecks = Ext.getCmp('checkitems');
                        var _inicio = '&CQL_FILTER=';
                        var cqlFilter = 'estado%20in%20(';
                        var cqlFilter2 = 'estado in (';

                        if (listaChecks.items.items[0].checked == true)
                        {
                            cqlFilter = cqlFilter + '1';
                            cqlFilter2 = cqlFilter2 + '1';
                        }

                        if (listaChecks.items.items[1].checked == true)
                            if (endsWith(cqlFilter,'('))
                            {
                                cqlFilter = cqlFilter + '2';
                                cqlFilter2 = cqlFilter2 + '2';
                            }
                            else{
                                cqlFilter = cqlFilter + ',2';
                                cqlFilter2 = cqlFilter2 + ',2';
                            }

                        if (listaChecks.items.items[2].checked == true)
                            if (endsWith(cqlFilter,'(')){
                                cqlFilter = cqlFilter + '3';
                                cqlFilter2 = cqlFilter2 + '3';
                            }
                            else{
                                cqlFilter = cqlFilter + ',3';
                                cqlFilter2 = cqlFilter2 + ',3';
                            }

                        if (listaChecks.items.items[3].checked == true)
                            if (endsWith(cqlFilter,'(')){
                                cqlFilter = cqlFilter + '4';
                                cqlFilter2 = cqlFilter2 + '4';
                            }
                            else {
                                cqlFilter = cqlFilter + ',4';
                                cqlFilter2 = cqlFilter2 + ',4';
                            }

                        if (endsWith(cqlFilter,'('))
                        {
                            cqlFilter = '';
                            cqlFilter2 = '';
                        }
                        else {
                            cqlFilter = cqlFilter +')';
                            cqlFilter2 = cqlFilter2 + ')';
                        }

                        var url = "http://" + host + ":" + portGeoserver +"/geoserver/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=portal:torre_punto" + _inicio + cqlFilter;



                        var cant = metcapas.length;
                        //Recorremos las capas y filtramos los datos.
                        for (var count = 0; count < cant ; count++)
                        {

                            if (metcapas[count].name == "Torres Línea de 500 KV" 
                                || metcapas[count].name == "Info: Hormigonado"
                                || metcapas[count].name ==  "Info: Montaje"
                                || metcapas[count].name == "Info: Tendido"
                                || metcapas[count].name == "Info: Alerta")
                            {
                                metcapas[count].mergeNewParams({'CQL_FILTER': cqlFilter2 });
                                metcapas[count].redraw();
                            }
                        }

                        OpenLayers.loadURL(url, '', this, wfsResponse);
                    } 
                }
            ],
        items : [myCheckboxGroup],
        keys : [{
            key : [Ext.EventObject.ENTER],
            handler : function() {
                
            }
        }]
    });

    var buscar = new Ext.Panel({
        id: 'buscarTorreEstado',
        collapsible : false,
        split : true,
        anchor : '100%',
        autoScroll: true,
        hideBorders : false,
        items: [buscarForm, buscarGrilla]          
    });

    container.removeAll(true);
    container.add(buscar);
    container.doLayout();
}

//Verifica que la cadena termine con un patrón determinado.
function endsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

//En base a la consulta WFS obtenida, genera la capa y da la cantidad de resultados obtenidos
function wfsResponse(transport) 
{
    var gmlParser = new OpenLayers.Format.GML();
    var features = gmlParser.read(transport.responseText);

    var myStyles = new OpenLayers.StyleMap({
        "default": new OpenLayers.Style({
            pointRadius: "5", // sized according to type attribute
            fillColor: "transparent",
            strokeColor: "#ff9933",
            strokeWidth: 2,
            graphicZIndex: 1
        }),
        "select": new OpenLayers.Style({
            fillColor: "transparent",
            strokeColor: "#3399ff",
            graphicZIndex: 2
        })
    });

    store.loadData(features);
    var vecLayer = new OpenLayers.Layer.Vector('Torre', {visibility: false, styleMap: myStyles});
    vecLayer.displayInLayerSwitcher = false;
    store.bind(vecLayer);
    mapa.addLayer(vecLayer);
    select.bind(vecLayer, {multiple: false, clickout:true, toggle:true});  

    Ext.getCmp('listadoTorresEtapa').setTitle('Listado de Torres (' + features.length +' registro/s encontrado/s)');
    setStatus("status","");  
}

//Actualiza el control Tab de Leyendas de Capas en el mapa
function updateLegendPanel(container) {

    CreateLegendBox();

    container.removeAll(true);
    container.add(legendPanel);
    container.doLayout();
}

//Posiciona la vista del mapa en una configuración determinada
function posicionarMapa(mapa) {

    var zoom = 15;
    
    //lonLat = new OpenLayers.LonLat(-54.62, -25.48)
    var lonLat = new OpenLayers.LonLat(-56.2096, -25.0833)
            .transform( new OpenLayers.Projection("EPSG:4326"), // transforma de WGS 1984
            new OpenLayers.Projection("EPSG:900913") // para a projeção Spherical Mercator
          );

    mapa.setCenter(lonLat, zoom);

    //var bounds = new OpenLayers.Bounds(-74, -34, -29, 6);
    var bounds = new OpenLayers.Bounds(-54.6426, -25.4724, -54.5995,-25.4937);
    
    var proj = new OpenLayers.Projection("EPSG:4326");
    bounds.transform(proj, mapa.getProjectionObject());
    mapa.initialExtent = bounds;
    
    mapa.zoomToExtent(bounds);
    mapa.zoomTo(zoom);
}


////////////////////////////////////////////////////////////////////////////////
// Controles para consultas de las informaciones sobre las capas WMS (getFeatureInfo)
////////////////////////////////////////////////////////////////////////////////

//En base a la respuesta obtenida en la consulta WFS, se procesa la misma y se muestra en pantalla.
function showInfoPopup(location, content) {
    var html = document.createElement("div");
    html.innerHTML = content;
    var tabs = html.getElementsByTagName('table').length
    var j = 0;
    
    while (j < tabs) {
        var t = html.getElementsByTagName('table')[j];
        var r = t.getElementsByTagName('tr');
        var cap = t.getElementsByTagName('caption');
        var cols = r.length;
        var rows = r[0].getElementsByTagName('th').length;
        var cell, next, tem;
        var i = 0;
        var tbod = document.createElement('table');
        tbod.cellPadding = '20px';
        tbod.cellSpacing = '5px';
        var tcap = tbod.createCaption();
        tcap.innerHTML = '<h1>' + cap[0].firstChild.nodeValue.toUpperCase() + '</h1>';
        while (i < rows) {
            cell = 0;
            tem = document.createElement('tr');
            while (cell < cols) {
                if (cell == 0) 
                   { next = r[cell++].getElementsByTagName('th')[0]}
                else
                    next = r[cell++].getElementsByTagName('td')[0];
                tem.appendChild(next);
            }
            tbod.appendChild(tem);
            ++i;
        }
        t.parentNode.replaceChild(tbod, t);
        ++j;
    }
    var anota  = new Array();
    var f = editingLayer.features.length;
    i = 0;
    while (i < f) {
        if (editingLayer.features[i].atPoint(location, 10, 10)) { anota.push(editingLayer.features[i]) }
        i++;
    }
    f = anota.length;
    i = 0;
    var anotahtml = '<br>';
    if (f > 0) { anotahtml = anotahtml + '<h1>Anotación</h1><br>' };
    while (i < f) {
        if (!anota[i].attributes.name && !anota[i].attributes.description) {
            anotahtml = anotahtml + '<h3>Ninguna anotación disponible.</h3>';
        }
        else {
            anotahtml = anotahtml + '<h3>' + (anota[i].attributes.name ? anota[i].attributes.name : '<i>Sin nombre<i>') + '</h3>';
            anotahtml = anotahtml + (anota[i].attributes.description ? anota[i].attributes.description : '<i>Sin descripción<i>')+'<br>';
        }
        i++;
    }
    if (infoPopup) {
        infoPopup.location = location;
        infoPopup.update(html.innerHTML + anotahtml);
    }
    else {
        infoPopup = new GeoExt.Popup({
            title: 'Información',
            autoScroll: true,
            //width: 400,
            height: 300,
            autoWidth: true,
            map: mapa,
            unpinnable: false,
            anchored: false,
            draggable: true,
            closeAction: 'hide',
            location: location,
            html: html.innerHTML + anotahtml
        });
    }

    infoPopup.show();
}

//Selecciona las capas sobre las que se harían la consultas WFS
function filterQueryableLayers() {

    var queryableLayers = new Array();
    var legends = new Array();
    var layer;

    for (var i = 0; i < mapa.getNumLayers(); i++) {
        layer = mapa.layers[i];
        if ((layer instanceof OpenLayers.Layer.WMS) 
            && !layer.isBaseLayer
            && layer.visibility 
            && legends.toString().indexOf(layer.legendURL) < 0) 
        {
            legends.push(layer.legendURL);
            queryableLayers.push(layer);
        }
    }

    return queryableLayers;
}

//Selecciona las capas sobre las que se harían la consultas WFS
function filterTopQueryableLayer() {

    var queryableLayers = new Array();
    var topLayer = null;

    for (var i = 0; i < mapa.getNumLayers(); i++) {
        layer = mapa.layers[i];
        if ((layer instanceof OpenLayers.Layer.WMS)
            && !layer.isBaseLayer 
            && layer.visibility 
            && (!topLayer || parseFloat(topLayer.getZIndex()) < parseFloat(layer.getZIndex()))) {
            topLayer = layer;
        }
    }
        
    queryableLayers.push(topLayer);

    return queryableLayers;
}

//Crea la herramienta para obtener la información sobre la Torre seleccionada.
function createFeatureInfoButton(onlyTopLayer) 
{
    var wmsFeatureInfo = new OpenLayers.Control.WMSGetFeatureInfo({ map: mapa, hover: true }); //Cuando se haga pasar el cursor del mouse sobre el punto
    var wmsFeatureInfo2 = new OpenLayers.Control.WMSGetFeatureInfo({ map: mapa, hover: false }); //Cuando se hace click en el punto

    wmsFeatureInfo.events.on({
        getfeatureinfo: function (e) {
            
            if (e.text.indexOf('torre_punto') !== -1 || e.text.indexOf('torres_puntos_info_alerta') !== -1) 
            {
                var texto = e.text.replace("origen_suelo","ORIGEN DE LOS SUELOS");
                texto = texto.replace("linea_transmision","LINEA DE TRANSMISION");
                texto = texto.replace("tramo_1","TRAMO 1");
                texto = texto.replace("tramo_2","TRAMO 2");
                texto = texto.replace("sub_tramo_c1","SUB-TRAMO C1");
                texto = texto.replace("sub_tramo_c2","SUB-TRAMO C2");
                texto = texto.replace("sub_tramo_c3","SUB-TRAMO C3");
                texto = texto.replace("sub_tramo_c4","SUB-TRAMO C4");
                texto = texto.replace("sub_tramo_c5","SUB-TRAMO C5");
                texto = texto.replace("sub_tramo_c6","SUB-TRAMO C6");
                texto = texto.replace("torres_puntos_info_alerta","COMENTARIO");
                texto = texto.replace("altura_nominal","ALTURA NOMINAL");
                
                texto = texto.replace("fecha_hormigonado","HORMIGONADO");
                texto = texto.replace("fecha_montaje","MONTAJE");
                texto = texto.replace("fecha_tendido","TENDIDO");

                texto = texto.replace("torres_puntos_info_hormigonado","HORMIGONADO");
                texto = texto.replace("torres_puntos_info_montaje","MONTAJE");
                texto = texto.replace("torres_puntos_info_tendido","TENDIDO");
                texto = texto.replace("torre_punto","TORRE");
                texto = texto.replace("torre_punto_id","TORRE");
              
                texto = texto.replace("ORIGEN_SUELO","ORIGEN DE LOS SUELOS");
                texto = texto.replace("LINEA_TRANSMISION","LINEA DE TRANSMISION");
                texto = texto.replace("TRAMO_1","TRAMO 1");
                texto = texto.replace("TRAMO_2","TRAMO 2");
                texto = texto.replace("SUB_TRAMO_C1","SUB-TRAMO C1");
                texto = texto.replace("SUB_TRAMO_C2","SUB-TRAMO C2");
                texto = texto.replace("SUB_TRAMO_C3","SUB-TRAMO C3");
                texto = texto.replace("SUB_TRAMO_C4","SUB-TRAMO C4");
                texto = texto.replace("SUB_TRAMO_C5","SUB-TRAMO C5");
                texto = texto.replace("SUB_TRAMO_C6","SUB-TRAMO C6");
                texto = texto.replace("TORRES_PUNTOS_INFO_ALERTA","COMENTARIO");
           
                var popup = new OpenLayers.Popup.FramedCloud(
                    "pumapa", 
                    mapa.getLonLatFromPixel(e.xy),
                    null,
                    texto,
                    null,
                    true
                );

                mapa.addPopup(popup);

                /*popup.events.register("click", mapa, function puDestroy(e) {
                                                        popup.destroy();
                                                        popup = null;
                                                        OpenLayers.Util.safeStopPropagation(e);
                                                    });*/
            }
        }
    });

    wmsFeatureInfo.events.on({
        nogetfeatureinfo: function (e) {
            showInfoPopup(mapa.getLonLatFromPixel(e.xy), 'Ninguna información disponible');
        }
    });

    if (onlyTopLayer) {
        wmsFeatureInfo.events.on({
            beforegetfeatureinfo: function (e) {
                this.layers = filterTopQueryableLayer();
            }
        });
    }
    else {
        wmsFeatureInfo.events.on({
            beforegetfeatureinfo: function (e) {
                this.layers = filterQueryableLayers();
            }
        });
    }

    //
    wmsFeatureInfo2.events.on({
        getfeatureinfo: function (e) {
            //showInfoPopup(mapa.getLonLatFromPixel(e.xy), e.text);

            if (e.text.indexOf('torre_punto') !== -1 || e.text.indexOf('torres_puntos_info_alerta') !== -1) 
            {
                var texto = e.text.replace("origen_suelo","ORIGEN DE LOS SUELOS");
                texto = texto.replace("linea_transmision","LINEA DE TRANSMISION");
                texto = texto.replace("tramo_1","TRAMO 1");
                texto = texto.replace("tramo_2","TRAMO 2");
                texto = texto.replace("sub_tramo_c1","SUB-TRAMO C1");
                texto = texto.replace("sub_tramo_c2","SUB-TRAMO C2");
                texto = texto.replace("sub_tramo_c3","SUB-TRAMO C3");
                texto = texto.replace("sub_tramo_c4","SUB-TRAMO C4");
                texto = texto.replace("sub_tramo_c5","SUB-TRAMO C5");
                texto = texto.replace("sub_tramo_c6","SUB-TRAMO C6");
                texto = texto.replace("torres_puntos_info_alerta","COMENTARIO");
                texto = texto.replace("altura_nominal","ALTURA NOMINAL");
                
                texto = texto.replace("fecha_hormigonado","HORMIGONADO");
                texto = texto.replace("fecha_montaje","MONTAJE");
                texto = texto.replace("fecha_tendido","TENDIDO");

                texto = texto.replace("torres_puntos_info_hormigonado","HORMIGONADO");
                texto = texto.replace("torres_puntos_info_montaje","MONTAJE");
                texto = texto.replace("torres_puntos_info_tendido","TENDIDO");
                texto = texto.replace("torre_punto","TORRE");
                texto = texto.replace("torre_punto_id","TORRE");
              
                texto = texto.replace("ORIGEN_SUELO","ORIGEN DE LOS SUELOS");
                texto = texto.replace("LINEA_TRANSMISION","LINEA DE TRANSMISION");
                texto = texto.replace("TRAMO_1","TRAMO 1");
                texto = texto.replace("TRAMO_2","TRAMO 2");
                texto = texto.replace("SUB_TRAMO_C1","SUB-TRAMO C1");
                texto = texto.replace("SUB_TRAMO_C2","SUB-TRAMO C2");
                texto = texto.replace("SUB_TRAMO_C3","SUB-TRAMO C3");
                texto = texto.replace("SUB_TRAMO_C4","SUB-TRAMO C4");
                texto = texto.replace("SUB_TRAMO_C5","SUB-TRAMO C5");
                texto = texto.replace("SUB_TRAMO_C6","SUB-TRAMO C6");
                texto = texto.replace("TORRES_PUNTOS_INFO_ALERTA","COMENTARIO");
           
                var popup = new OpenLayers.Popup.FramedCloud(
                    "pumapa", 
                    mapa.getLonLatFromPixel(e.xy),
                    null,
                    texto,
                    null,
                    true
                );

                mapa.addPopup(popup);

                popup.events.register("click", mapa, function puDestroy(e) {
                                                        popup.destroy();
                                                        popup = null;
                                                        OpenLayers.Util.safeStopPropagation(e);
                                                    });
            }
        }
    });

    wmsFeatureInfo2.events.on({
        nogetfeatureinfo: function (e) {
            showInfoPopup(mapa.getLonLatFromPixel(e.xy), 'Ninguna información disponible');
        }
    });

    if (onlyTopLayer) {
        wmsFeatureInfo2.events.on({
            beforegetfeatureinfo: function (e) {
                this.layers = filterTopQueryableLayer();
            }
        });
    }
    else {
        wmsFeatureInfo2.events.on({
            beforegetfeatureinfo: function (e) {
                this.layers = filterQueryableLayers();
            }
        });
    }

    var title = onlyTopLayer ? 'Información sobre una Capa WMS más arriba' : 'Información sobre Capas WMS';

    var featureInfoToolButton = new OpenLayers.Control({
        title: title,
        displayClass: onlyTopLayer ? 'hsControlTopLayerInfo' : 'hsControlMultiLayerInfo'
    });

    featureInfoToolButton.events.on({
        activate: function (e) { wmsFeatureInfo.activate(); wmsFeatureInfo2.activate();
        },
        deactivate: function (e) { if (infoPopup) { infoPopup.destroy(); infoPopup = null; } wmsFeatureInfo.deactivate(); wmsFeatureInfo2.deactivate(); 
        }
    });

    return featureInfoToolButton;
}

//Función que crea la barra de herramientas disponibles en la aplicación
function getCustomToolbar() {

    var measure = new HSLayers.Control.Measure({ layer: measureLayer });
    measure.distance.title = "Distancia";
    measure.area.title = "Área";

    var navigationHistory = new OpenLayers.Control.NavigationHistory();
    navigationHistory.previous.title = 'Vista Anterior';
    navigationHistory.next.title = 'Vista Siguiente';
    mapa.addControl(navigationHistory);


    var panelControls = 
    [
        createFeatureInfoButton(false),
        navigationHistory.previous, 
        navigationHistory.next,
        new OpenLayers.Control.Navigation({title : 'Mover'}),
        new OpenLayers.Control.ZoomBox({ title: 'Zoom', alwaysZoom: true, displayClass: 'hsControlZoomBox' }),
        measure.distance, 
        measure.area,
    ];

    var toolbar = new OpenLayers.Control.Panel({
        defaultControl: panelControls[0],
        displayClass: 'hsControlPanel'
    });

    toolbar.addControls(panelControls);
    return toolbar;
}

//Crea el Control LayerSwitcher y lo agrega al mapa.
function createLayerSwitcher(map, id, container) {

    var layerSwitcher = new HSLayers.Control.LayerSwitcher({ id: id, container: container});
    //var group = layerSwitcher.groups["Seleccionadas"];
    //if (group) {group.node.expanded = true; group.attributes.checked = true; }
    map.addControl(layerSwitcher);
    layerSwitcher.map = map;
    return layerSwitcher;
}

//Agrega los controles al Mapa
function setearControles(mapa) {

    zoomPanel = new OpenLayers.Control.InitialZoomPanel({ 'displayClass': 'olControlZoomPanel' });
    mapa.addControl(zoomPanel);
    
    mapa.addControl(new OpenLayers.Control.Navigation());
    
    mapa.addControl(new OpenLayers.Control.KeyboardDefaults());
    mapa.addControl(getCustomToolbar());
    //mapa.addControl(new OpenLayers.Control.Graticule({ title: 'Grilla' }));
    mapa.addControl(new OpenLayers.Control.ScaleLine());
    mapa.addControl(new OpenLayers.Control.OverviewMap({ maximized: false }));

    var loadingPanel =new OpenLayers.Control.LoadingPanel();

    mapa.addControl(loadingPanel);

    loadingPanel.toggle();

    // load your layers here
    // remove it as the above function returns
    //loadingPanel.minimizeControl();
}

//Función que crea el objeto ComboBox con las Escalas para ver las Capas
function createZoomSelector() {

    var scaleStore = new GeoExt.data.ScaleStore({ map: mapa });

    zoomSelector = new Ext.form.ComboBox({
        store: scaleStore,
        emptyText: "Escala",
        tpl: '<tpl for="."><div class="x-combo-list-item">1 : {[parseInt(values.scale)]}</div></tpl>',
        editable: false,
        triggerAction: 'all', // needed so that the combo box doesn't filter by its current content
        mode: 'local' // keep the combo box from forcing a lot of unneeded data refreshes
    });

    zoomSelector.on('select',
        function (combo, record, index) {
            mapa.zoomTo(record.data.level);
        },
        this
    );

    mapa.events.register('zoomend', this, function () {
        var scale = scaleStore.queryBy(function (record) {
            return this.map.getZoom() == record.data.level;
        });

        if (scale.length > 0) {
            scale = scale.items[0];
            zoomSelector.setValue("Escala 1 : " + parseInt(scale.data.scale));
        }
        else {
            if (!zoomSelector.rendered) return;
            zoomSelector.clearValue();
        }
    });

    return zoomSelector;
}

////////////////////////////////////////////////////////////////////////////////
// Control similar al ZoomPanel, usa uu ZoomToExtent(map.initialExtent)
// en vez de ZoomTomMaxExtent
////////////////////////////////////////////////////////////////////////////////
/**
* Class: OpenLayers.Control.ZoomToMaxExtent 
* The ZoomToMaxExtent control is a button that zooms out to the maximum
* extent of the map. It is designed to be used with a 
* <OpenLayers.Control.Panel>.
* 
* Inherits from:
*  - <OpenLayers.Control>
*/
OpenLayers.Control.ZoomToInitialExtent = OpenLayers.Class(OpenLayers.Control, {

    /**
    * Property: type
    * {String} The type of <OpenLayers.Control> -- When added to a 
    *     <Control.Panel>, 'type' is used by the panel to determine how to 
    *     handle our events.
    */
    type: OpenLayers.Control.TYPE_BUTTON,

    /*
    * Method: trigger
    * Do the zoom.
    */
    trigger: function () {
        if (this.map) {
            this.map.zoomToExtent(this.map.initialExtent);           
        }
    },

    CLASS_NAME: "OpenLayers.Control.ZoomToInitialExtent"
});

OpenLayers.Control.InitialZoomPanel = OpenLayers.Class(OpenLayers.Control.Panel, {

    /**
    * Constructor: VisLayers.Control.ZoomPanel 
    * Add the three zooming controls.
    *
    * Parameters:
    * options - {Object} An optional object whose properties will be used
    *     to extend the control.
    */
    initialize: function (options) {
        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
        this.addControls([
            new OpenLayers.Control.ZoomIn({ title: 'Aumentar zoom' }),
            new OpenLayers.Control.ZoomToInitialExtent({ map: mapa, displayClass: 'olControlZoomToMaxExtent', title: 'Vista inicial' }),
            new OpenLayers.Control.ZoomOut({ title: 'Disminuir zoom' })
        ]);
    },

    CLASS_NAME: "OpenLayers.Control.InitialZoomPanel"
});
